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/AVvXsEjB76D3mDHOL7JyG688Svs_YLrC_zXWalQBASNV2sGFuwP3E8bq-1EL-g0DZm28cimY-mFrjF3moKMMHdPR8yOLt2Z_gaCu6PlHJzuxEik0f_naHKua-0FRekKGb8YSJE2bEMIR5gaFcd4/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPIsvUo5Og4-ZrGyGjCgHaMDQEDrcICzJN_MKnnojCcwERQxHdmz3qnb-G7wKMQOUuGAvjizXrjziuClcyPFZ9ZX1XqYYsMTm206Exm5f1wiGKg1-4xbsRACSFvUQEumk1Q5Af_7JhxY4/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>
- Dán code đó vào vị trí các bạn cần thêm nhé/
Không có nhận xét nào:
Đăng nhận xét