Đang tải

CSS tạo hiệu ứng ánh sáng khi hover vào hình ảnh trong Flatsome

Hôm nay, MuaTheme.com sẽ hướng dẫn các bạn cách tạo hiệu ứng ánh sáng khi hover vào hình ảnh trong Flatsome cực kỳ đơn giản.

.product-small .box-image:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.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, 0.3) 100%
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.3) 100%
  );
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

Nếu bạn không dùng theme Flatsome thì có thể vào menu Giao diện -> Tùy biến -> CSS bổ sung để thêm code css

Lưu lại và thưởng thức thành quả thôi!

Theo dõi
Thông báo của

0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận
0
Rất thích suy nghĩ của bạn, hãy bình luận.x