CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot ~ SV Lâm Nghiệp

Với thủ thuật thêm 1 đoạn code CSS3 sẽ làm cho hình ảnh và trang Web, blog của bạn thêm sống động hơn.
bài viết này mình giới thiệu về đoạn code CSS3 thay đổi hình ảnh khá đẹp mắt khi rê chuột vào.

Demo: http://360anhdep.blogspot.com/p/a.html
Code:


<style type="text/css">

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; 
height: 434px; 
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease; 
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}


a.nowandthen img:nth-of-type(2){ 
z-index: 1;
}


a.nowandthen:hover img:nth-of-type(1){ 
clip: rect(0,0,434px,0); 
opacity: 0;
}

</style>

<a class="nowandthen" href="http://itviet360.com">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3B92eh-Cf9iUdlVjbQkzrX8LYhYmmprxw9v8f8rfuzye6BfxcibFKYxULO72SkjNgQABePpGYi_RpiKJaw8rA2vnDgvlXj375CESGYRsQVPO0XQD21baF3zZw7zDmsGKyVv2mSeooBGY/s1600/sunset-sunrise-btrix+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0Lsfwo2HaE5mVkqricpVPIPmZi_CDmfm_48iBCl8fTFiDzocg2kKvFJnuyb3Xz7fBqiKoLybofT4C-lJV7QfEjhHP3izcMGFAb_Nf-_Y2W4FoV1Tuxno8H2knDlblhAfGesf5MseE34/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>