Hiệu ứng ảnh hiển thị trước và sau khi rê chuột vào, nhìn ảo thật ^^
<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{http://www.dynamicdrive.com/cssexamples/media/before.jpg
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>
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{http://www.dynamicdrive.com/cssexamples/media/before.jpg
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>
Code HTML:
<a class="nowandthen">
<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>
<a class="nowandthen alt">
<img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
<img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>
<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>
<a class="nowandthen alt">
<img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
<img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>
