Thứ Năm, 6 tháng 6, 2013

CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot

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.
CSS3 hiệu ứng hình ảnh

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