Tạo hiệu ứng (hover) đẹp đơn giản cho thumbnail blogspot

Làm đẹp Blog luôn là một tiêu chí hàng đầu với hầu hết tất cả các Blogger. Và hôm nay mình xin chia sẻ code Tạo hiệu ứng (hover) đẹp đơn giản cho thumbnail blogspot. Thì với hiệu ứng này khi chúng ta rê chuột vài thumbnail bài viết ngoài trang chủ sẽ có hiệu ứng luồng sáng lướt qua, các bạn có thể xem demo trên Blog mình luôn nhé!

Để thực hiên, rất đơn giản, các bạn chỉ cần copy đoạn code sau và dán lên trên thẻ đóng /b:skin

.block-image a{-webkit-transition:all .6s;-moz-transition:all .6s;-o-transition:all .6s;transition:all .6s}
.block-image a:before{background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);content:'';display:block;height:100%;left:-75%;position:absolute;top:0;transform:skewX(-25deg);width:50%;z-index:2}
.block-image a:hover:before{animation:shine 2.5s}
@keyframes shine {
100%{left:125%;left:125%}
}

Chú ý: nếu thuộc tính css các bạn đặt là block-image thì các bạn không cần phải sửa gì, còn nếu ví dụ đặt một cái tên khác như thumb-image chẳng hạn thì các bạn nên sửa lại tên thuộc tính cho đúng với tên thuộc tính blog các bạn nha.
Chúc các bạn thành công!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam