Chia sẻ hiệu ứng Hover hình ảnh bằng CSS3 đẹp cho blogspot

Chào các bạn trong bài viết về thủ thuật blogspot này mình sẽ chia sẻ tới các bạn một hiệu ứng Hover cho ảnh rất đẹp mình sưu tầm được.

XEM DEMO

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

Bước 1: Đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML và dán đoạn CSS lên phía trên thẻ ]]></b:skin

figure.snip1205 {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 220px;
 max-width: 310px;
 width: 100%;
 background: #000000;
 text-align: center;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1205 * {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.35s ease-in-out;
 transition: all 0.35s ease-in-out;
}
figure.snip1205 img {
 max-width: 100%;
 vertical-align: top;
height: 220px;
}
figure.snip1205 i {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 font-size: 40px;
 color: #000000;
 width: 60px;
 height: 60px;
 line-height: 60px;
 background: #ffffff;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
 -webkit-transform: translate(-50%, -50%) scale(0);
 transform: translate(-50%, -50%) scale(0);
 transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
figure.snip1205 a {
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 position: absolute;
}
figure.snip1205.blue {
 background-color: #2472a4;
}
figure.snip1205.blue i {
 color: #20638f;
}
figure.snip1205.red {
 background-color: #ab3326;
}
figure.snip1205.red i {
 color: #962d22;
}
figure.snip1205.yellow {
 background-color: #e08e0b;
}
figure.snip1205.yellow i {
 color: #c87f0a;
}
figure.snip1205.green {
 background-color: #229955;
}
figure.snip1205.green i {
 color: #1e8449;
}
figure.snip1205.orange {
 background-color: #d67118;
}
figure.snip1205.orange i {
 color: #bf6516;
}
figure.snip1205.navy {
 background-color: #2b3c4e;
}
figure.snip1205.navy i {
 color: #222f3d;
}
figure.snip1205:hover img,
figure.snip1205.hover img {
 opacity: 0.3;
 -webkit-filter: grayscale(100%);
 filter: grayscale(100%);
}
figure.snip1205:hover i,
figure.snip1205.hover i {
 -webkit-transform: translate(-50%, -50%) scale(1);
 transform: translate(-50%, -50%) scale(1);
 transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Bước 2: Bạn tiếp tục dán đoạn JS sau lên phía trên thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
 $(".hover").mouseleave(
 function () {
 $(this).removeClass("hover");
 }
 );
//]]>
</script>

Bước 3: Bạn dán đoạn HTML cần hiển thị này vào chỗ muốn hiển thị, có thể bên sidebar,...

<figure class="snip1205">
 <img src="http://i.imgur.com/dvS447x.jpg" alt="sample2"/>
 <i class="fa fa-picture-o"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 blue">
 <img src="http://i.imgur.com/ihFFID9.jpg" alt="sample4"/>
 <i class="fa fa-check-circle"></i>
 <a href="#"></a>
 </figure>
 <figure class="snip1205 green">
 <img src="http://i.imgur.com/ARdzTaN.jpg" alt="sample3"/>
 <i class="fa fa-star"></i>
 <a href="#"></a>
 </figure>

Chỉnh sửa

Bạn có thể thêm nhiều hơn 3 ảnh
- Thay màu đỏ bằng Link ảnh
- Thay màu cam bằng các Icon khắc bằng cách tham khảo nhiều Icon tại trang Font Awesome.
Chúc bạn thành công!