THÊM HIỆU ỨNG HOVER THUMBNAIL CHO BLOGSPOT

Chào mọi người, hôm nay mình mạn phép hướng dẫn "kĩ càng" thủ thuật thêm hiệu ứng hover thumbnail cho blogspot của bác Codedayroi.net nha. Demo ngay bên dưới.

hướng dẫn

Bước 1: Vào phần Chỉnh sửa HTML rồi thêm đoạn css phía bên dưới lên trên thẻ ]]></b:skin>.

.hover-mask{position:absolute;height:100%;background:rgba(4, 147, 114, 0.8);top:0;left:50%;right:50%;opacity:0;font-size:50px;font-weight:300;line-height:60px;text-align:center;pointer-events:none;z-index:2;-ms-transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;transition:all 0.5s}
.hover-mask:before{content:"\f058";font:normal normal normal 14px/1 FontAwesome;display:block;position:absolute;width:60px;height:60px;top:50%;left:50%;margin:-30px 0 0 -30px;color:#FFF;font-size:60px}
.tênclass:hover .hove,#tênid:hover .hover-mask{left:0;right:0;opacity:1}

Bước 2: Tìm thumbnail và thêm đoạn code bên dưới vào trong nó nha.

<div class='hover-mask'/>

Các bạn nhìn ảnh phía dưới này cho dễ hình dung ra nhé.

* tênclass, tênid bạn thay thành class hoặc id của thumbnail đấy, của mình tên class là "block-image".

cách đổi màu

- Để đổi màu hiệu ứng mình đã giới thiệu rất rõ trong bài KĨ THUẬT TÔ MÀU RGBA COLORS TRONG CSS3. Để thay dấu tích, tìm và thay "\f058" thành một kí hiệu mà bạn muốn. Kí hiệu lấy tại Font Awesome.

lời kết

Trên mình đã hướng dẫn "kĩ càng" thủ thuật thêm hiệu ứng hover thumbnail cho blogspot. Mọi thắc mắc và đóng góp cứ bình luận ngay bên dưới mình sẽ check ngay. 

#NGUỒN:CODEDAYROI.NET