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/AVvXsEhkbU74JHqmxjTFJwqHB-KD0SzcPtO1Fz6QoAXpXelWxCrEa_zXkn1YsOzs3BsjDJoZ1BxlvzzKUgtlw7HHFvfQnvej9b1oZAEwlMaA4tqrfBeMJLN4NvnAg5_evuqUbsQFa1qkAH8drsk/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>