0 (Peel Back) Image dengan CSS Effect

Peel Back Image menyenangkan untuk dilihat, terutama jika transisi yang tepat digunakan untuk secara efektif swap antara keduanya. Contoh CSS dibawah ini  menggunakan CSS3 animasi onmouseover gambar. Hasilnya sederhana namun ramping !

 


 


CSS

<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */
}


a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

</style>

  HTML:

<a class="nowandthen">
    <img src="url-Image.jpg" alt="">
    <img src="url-Image.jpg" alt="">
</a>

<a class="nowandthen alt">
    <img src="url-Image.jpg" alt="">
    <img src="url-Image.jpg" alt="">
</a>