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

47 Comments:

Post a Comment

  1. Ủa sao html trong blogger bạn chụp lại là font Roboto nhỉ, nó là font sans-serif cơ mà

    ReplyDelete
  2. cái thumb hơi xấu bác ạ, cần edit sao cho đẹp

    ReplyDelete
  3. Replies
    1. xin cái lk
      tên: Duy Phương
      link: www.duyphuong.tk
      mong dc hợp tác :)))

      Delete
  4. hay đó bác
    ngoctinhit.tk

    ReplyDelete
  5. Có code thống kê số lượng ng xem thực nào mà đẹp k e :s đừng lừa đảo là đc :D

    ReplyDelete
  6. Mà bác sửa lại Mô tả với Url Thủ Thuật Hay Blog giúp e sang
    Url : https://www.kienpsdblog.com/
    Mô tả : Kiên PSD Blog
    - Tks

    ReplyDelete
  7. -_- Font Awesome cũng để link rút gọn vậy ba

    ReplyDelete
  8. giờ mới để ý :V bài cũ từ khi chưa đặt liên kết với Bẻo :V

    ReplyDelete