Friday, August 3, 2018

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

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