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

Đọc tiêu đề chưa :v Rồi thì vô ngay luôn không nói nhiều nữa!!.


Hướng dẫn thực hiện

Bước 1: Các bạn vào Chủ đề > Chỉnh sửa HTML. Tìm  <a expr:href='data:post.url'> rồi dán đoạn code bên dưới vào sau kết quả đầu tiên tìm được.
<span class='zoom-img'/>
Bước 2: Thêm đoạn CSS này vào vị trí bất kì trong blog.
<style>.zoom-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://2.bp.blogspot.com/-gyxXTshvxSU/W10dBKXlItI/AAAAAAAABHU/A7DEaAJSZT0a_gcTjBgZ98kp-VbYsafXgCLcBGAs/s1600/AYdd1pF.png) no-repeat center center;
    z-index: 2;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    opacity: 0;
    transform: scale(1.5);
    visibility: hidden;
}
.img-thumbnail:hover .zoom-img{opacity:1;transform:scale(1);visibility:visible}
.img-thumbnail:hover img{-webkit-filter:brightness(40%)}</style>
Lưu ý:
  - thay  img-thumbnail thành id hoặc class thumbnail của blog bạn.
  - thay đoạn code màu xanh thành url ảnh bạn muốn hiển thị

Vậy là xong ời chúc các bạn thành công!!

#NGUỒN VIEW-SOURCE: NGUYỄN BẢO LINH

42 Comments:

Post a Comment

  1. Cái này em từng thấy ở đâu rùi 😂

    ReplyDelete
  2. Viết bài chưa được chất lượng cho lắm.

    ReplyDelete
    Replies
    1. Nhưng cái hiệu ứng Hover cũng đẹp lắm :))

      Delete
    2. chớ sao :v tui cũng chả quan trọng vấn đề bài viết lắm

      Delete
  3. Cái này thấy nhiều temp có rồi nhưng cũng không biết tích hợp

    ReplyDelete
  4. anh ơi
    https://2.bp.blogspot.com/-gyxXTshvxSU/W10dBKXlItI/AAAAAAAABHU/A7DEaAJSZT0a_gcTjBgZ98kp-VbYsafXgCLcBGAs/s1600/AYdd1pF.png
    font gì vậy anh :v ???

    ReplyDelete
  5. Anh ơi mobile phần trang chính lỗi kìa

    ReplyDelete
  6. Tên hiển thị: Tính Getter Blog
    URL: https://www.tinhgetter.ooo/
    Đã đặt cho ô nhé.

    ReplyDelete
  7. :V hello tui đã come back,sáng vui vẻ :V

    ReplyDelete