Banner

Thêm Css hiệu ứng ánh sáng shine khi hover vào sản phẩm

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)
}

CSS
Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Liên hệ Zalo