Hiệu ứng hover cho bài viết đẹp cho blog

Hover là 1 hiệu ứng khi đưa chuột vào ảnh hay tiêu đề bài viết gì đó sẽ xuất hiện 1 hiệu ứng, hiệu ứng này sẽ giúp nhìn blog/website của các bạn trông rất chuyên nghiệp và đẹp. Hover giúp gây sự hứng thú cho người đọc, làm cho blog/website sinh động hơn.

Dưới đây là ảnh demo

Cảm thấy thế nào thật sinh động & chuyên nghiệp đúng không?
Bây giờ mình sẽ hướng dẫn các bạn làm:

Bước 1:

Đăng nhập Blogger -> Mẫu -> Chỉnh sửa HTML -> sau đó nhấn tổ hợp Ctrl + F gõ là ]]></b:skin>

Sau khi tìm xong, thêm đoạn css này trên thẻ vừa mới tìm được:

/* 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); }

Vậy là xong phần đầu, các bạn muốn hiển thị trên blog thì làm bước sau đây.

Bước 2:

Đăng nhập Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript

Sau đó copy và dán toàn bộ code dưới đây vào

/* 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 khi các bạn dán thì hãy nhớ chỉnh sửa lại link liên kết & link ảnh đúng Blog mình nhá

Để thay icon thì các bạn vào đây Click vào đây

Rồi cuối cùng là lưu.

CHÚC CÁC BẠN THÀNH CÔNG! Cám ơn các bạn đã xem bài viết này.