Hiệu Ứng Hover Ảnh Cho Blogger (Blogspot)

     Hiệu ứng hover ảnh là một hiệu ứng được rất nhiều Blogger sử dụng để làm trang blog càng sinh động, và có thể dùng nó để giới thiệu bài viết nổi bật của mình với khách hơn.

DEMO: Các bạn có thể xem phần sidebar bên phải Blog mình.

Hiệu Ứng Hover Ảnh Cho Blogger (Blogspot)

Hiệu Ứng Hover Ảnh Cho Blogger (Blogspot)

Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML >> Tìm đến dòng ]]>< 

Sau khi tìm xong, các bạn hoàn toàn code sau vào trước thẻ ]]><

/* Included color classes.. 
 .red 
 .blue 
 .yellow
 .green
 .orange
 .navy 
*/
/* Icon set - http://ionicons.com */
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
figure.snip1205 {
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10px 1%;
 min-width: 220px;
 max-width: auto;
 width: 100%;
 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;
}
figure.snip1205 i {
 position: absolute;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 font-size: 34px;
 color: ;
 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);
}

Sau đó, vào trang quản lí Blog >> Bố cục >> Thêm tiện ích >> HTML/Javascript >> Copy toàn bộ code dưới vào

<h2 class='title' style='color: #1092da; text-decoration:blink'>
<i class="fa fa-picture-o" aria-hidden="true"></i>
ẢNH BÌA CHẤT
<a href='http://www.adminhieu.tk/search/label/PSD' style='font-weight: bold; background-color: #1092da;color: #fff;padding: 0 5px;'>Xem thêm <i class='fa fa-chevron-circle-right'></i></a></h2>
<figure class="snip1205 blue">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh5MhTwweQgE3g0rUFQtm5XAVBIoC6ZfwLNbncsaRZB2oOxYY30VSSIIywoqE03NXdSA1QOLAjfDMs5hJ-EzAHt7rdTv5_6IotcHlafCXGlaA-cEqf7AavBWwbStcs8SAtlO9NMbV4rvE/s1600/AdminHieuBlog+20+-++.jpg" alt="sample4"/>
 <i class="fa fa-check-circle-o" aria-hidden="true"></i>
 <a href="http://www.adminhieu.tk/2016/08/anh-bia-em-tuyet-nhat-khi-he-moi-cuoi.html"></a>
 </figure>
<figure class="snip1205 red">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbhNlQnWLh8q_TKJD-n4_t5nXIsQh4-iUjbubulxOt7mXxwC87SbAKWSId-HE9JF7b7liGmmPPdEl7EisQciYCzuCiTHr_LpDvMUTiXLnT8vlOt1jVLpIevLHOFPZhcr-f4RjHeM_YBLM/s1600/chung-ta-khong-thuoc-ve-nhau.png" alt="sample4"/>
 <i class="fa fa-diamond" aria-hidden="true"></i>
 <a href="http://www.adminhieu.tk/2016/07/anh-bia-chung-ta-khong-thuoc-ve-nhau.html"></a>
 </figure>
<figure class="snip1205 orange">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5M9QiYSTkjD-gYrrfCTJRnRKTyTNJmciHuSUICy9jFDWcsGGhxn986ShZAEX0uO5_QsRtAb_H_OGnI-vrbBmYK3EuIjei87jJrvIlMUYTSk2gwCL9UearzBIdiMcn1bf672uIGZEhhT4/s1600/AdminHieuBlog+11+-+YeuKhongNghiPhep+.jpg" alt="sample4"/>
 <i class="fa fa-folder-open-o" aria-hidden="true"></i>
 <a href="http://www.adminhieu.tk/2016/07/anh-bia-yeu-khong-nghi-phep.html"></a>
 </figure>

Thế là hầu như đã xong, các bạn chỉ cần sửa lại các thông số, các đường link phù hợp cho Blog bạn thôi.
Hãy để lại Bình Luận nếu bạn thắc mắc, mình sẽ giải đáp ngay.
Chúc bạn bạn thành công.

Chào thân ái!

Có lẽ bạn thích?