Tạo hiệu ứng (hover) đẹp đơn giản cho thumbnail blogspot
/ lúc / 0 bình luận
Tham gia nhóm Phú Cường Blog để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!
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!

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.