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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVPmhhyUKedMq3KjsocnPQHjW02VWprIF0-AZqkwXsPvyaKMvzf6gvNeZQCou1tY95ObVlKBdP5986lga_HO-wFOVdMEBjlmyYft4I100Ads06e90FH5sa5ewC2nFlXeMOPN7Qi21orHI/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