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/AVvXsEhzOCD9NaBoZZXLpHwX94afprlXiWu1MJ5dGAMB3d0MlF7sZRsH4Z9xHwLFMrZy2AKndGqA1wIp_SVhsB7ABxaI71ViX3OZ0BkGJVVxN1baCppG6jmeLagDszHMOajel_JKK0MxP25yQWc/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxlr317umtxkgSNSjlhe4uqrUU3q-KH_OZkS5N6LT7cKTNUFQ3vV6CfA3m228OgP0id-XvtogCZKjHZn7oHnhMfkdMVWZ-tiV0K3WqgJ59_UOCz6ojKtNUBAF2zjwoDVKll1ziwdGbvso/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>- Dán code đó vào vị trí các bạn cần thêm nhé/