Hiệu ứng hover ảnh cho Blogger - Blogspot

Hiệu ứng hover là 1 hiệu ứng rất thông dụng, được sử dụng nhiều ở các website chia sẻ, cung cấp hình ảnh. Nó giúp cho website bạn trong sinh động hơn rất nhiều, giúp cho người đọc hứng thú, giúp cho việc trình bài ảnh của bạn dễ dàng hơn, thu hút được sự chú ý của khách hàng.
DEMO: ( Phần ảnh bìa facebook mới bên sidebar )

Đẹp không nào :v .. Mình sẽ hướng dẫn các bạn làm 1 hiệu ứng trong đây nhé :D
Bắt đầu:
 Vào trang quản lí Blog >> Mẫu >> Chĩnh sửa HTML >> Tìm đến dòng ]]>< (dùng ctrl + f để tìm)
Sau khi tìm các bạn copy toàn bộ css dưới lên trên ]]><
/* 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); }
Thế là xong phần thiết kế. Bây giờ chúng ta chọn chỗ hiễn thị:
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: #DE0000; text-decoration:blink'><i class="fa fa-picture-o" aria-hidden="true"></i>ẢNH BÌA FACEBOOK MỚI <a href='http://www.vanthangit.com/search/label/PSD' style='font-weight: bold; background-color: #f00;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/AVvXsEjGZhuxGfMN3s7HRN14ecFYGFlVjQhH5cKA2q-tqO29tyTZMcTSwxRxNLUV2RfyCwU8R4K5KSJYRe7F-UlR7IEVkfFnMQfJLYcNAVJEkhuI6PBSYO2AgH8zBMDgCYEZcw-nLwjOVeVBcnA/s1600/toiyeuloptoi.png" alt="sample4"/> <i class="fa fa-check-circle-o" aria-hidden="true"></i> <a href="http://www.vanthangit.com/2016/05/anh-bia-toi-yeu-lop-toi-anh-bia-facebook.html"></a> </figure><figure class="snip1205 red"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmrhDo6aTH8H8LMkf-hmsnl_TsZCURHk85S9zraiP3mfxlm4OKDjJ6mTERacfZKqZrbJawanpcWdsTmEjVMHlcj8rx8gi_vRexpEkWxdLFZ7clabl2nNHQrsYalhB0rQcwWbdc3TCB0k/s1600/PSDTOICHITHUOCVETOI.png" alt="sample4"/> <i class="fa fa-diamond" aria-hidden="true"></i> <a href="http://www.vanthangit.com/2016/05/psd-toi-chi-thuoc-ve-toi-anh-bia.html"></a> </figure><figure class="snip1205 orange"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZwG6GKMMeTyby1vMHn-8qw_OKmxp-baFACGUnlF_rOHlwKkyqezYsXvlvA5wpN05x1fgr_En9TNGQlCmNTZ5C2hbXhTh8ACixo7JajIeJ3ERPz1bJfNMEKYadO9Yz97jqH7oJnPzLK50/s1600/emdangodau3.png" alt="sample4"/> <i class="fa fa-folder-open-o" aria-hidden="true"></i> <a href="http://www.vanthangit.com/2016/05/anh-bia-tam-trang-vo-oi-em-ang-o-au.html"></a> </figure>
Sau khi copy các bạn chĩnh lại link trong code trên phù hợp với Blog của mình nhé
Để thay các Icon các bạn vào đây: Nhấp vào đây
Xong hết tất cả các bạn lưu lại nhé :D
Chúc các bạn thực hiện thành công :v