Bild im Bild mit transition

<a href="#">
<div class="box">
<div class="lupe"><img src="lupe.jpg" alt="" /></div>
</div>
</a>

.box {
position: relative;
background: url(image.jpg);
width: 800px;
height: 600px;
margin: 20px auto;
overflow: hidden;
}

.box .lupe {
position: absolute;
bottom: 5px;
right: -50px;
z-index: 1;
padding: 10px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
background: rgba(0,0,0,.5);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.box:hover .lupe {
right: 10px;
}

↑ Seitenanfang