Tạo hiệu ứng ánh sáng lấp lánh Shine khi hover vào ảnh sản phẩm Woocommerce khi tùy biến theme flatsome
Tạo hiệu ứng ánh sáng lấp lánh Shine khi hover vào ảnh sản phẩm Woocommerce khi tùy biến theme flatsome
Các bước thực hiện: Flatsome >> Advance >> Custom CSS
CSS:
.product-small .box-image:hover::before{-webkit-animation:shine .75s;animation:shine .75s}@-webkit-keyframes shine{100%{left:125%}}@keyframes shine{100%{left:125%}}.product-small .box-image::before{position:absolute;top:0;left:-75%;z-index:2;display:block;content:'';width:50%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}
