Tạo hiệu ứng đẹp cho hình ảnh

Hôm nay Vietin24h.com sẽ giới thiệu đến các bạn code tạo hiệu ứng đẹp cho hình ảnh ! Ưu điểm của đoạn code này là chỉ dùng CSS3 va HTML nên không ảnh hưởng gì đến tốc độ của Website/blog của bạn 

Ảnh minh họa: 

Các bước thực hiện: 

1. Đăng nhập Blogger

2. Chọn mẫu--> Chỉnh sửa HTML

3. Chèn code bên dưới vào trước thẻ ]]></b:skin>

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;
}

4. Lưu lại

5. Thêm tiện ích HTML/ Javascript và chèn code bên dưới vào :

<a class="nowandthen" href="http://www.viettin24h.com/">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPOWFyyA4usrLKStToXHd0ZUr-zEho4D_rAAxOQec0nNtdR3VsR6gnrIeFrOhKLQBme9OgdjznMu40EZA3hcpqwS3W7uK-uxZrSC46wPUswPrhRi5PPTGh3_JsYlx9M49hLZStWqx_jO0/s1600/sunset-sunrise-btrix+(1).jpg" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGrpxJ803R3fLyCO5x6Do1nDsqFNMQ7NclIWG_G8uK25zK02Qv3-QwzVfwX1P9EJBRxg-0hyphenhyphenyLWQYFTjhMDPnNn1uYut8_cd5zTI2ASxSv2uaUtKmKUXAegqw87ty_j8QDaQz30DN4Lqw/s1600/sunset-sunrise-btrix+(2).jpg" />
</a>

Chúc các bạn vui ve