Hiệu ứng light effect khi di chuột vào ảnh trong theme Flatsome

Hiệu ứng light effect – Đây là hiệu ứng rất cần thiết khi các bạn di chuột vào hình ảnh có trên theme Faltsome. Nó sẽ tạo làm cho hình ảnh trở lên sáng hơn.

Hiệu ứng light effect

Làm đẹp website thông qua các hiệu ứng CSS là một trong những cách mà nhiều bạn thiết kế web đang sử dụng hiện nay. Đặc biệt, hiệu ứng ánh sáng khi rê chuột vào ảnh có vẻ rất được các bạn ưa chuộng.

Hiệu ứng light effect khi di chuột vào ảnh trong theme Flatsome

Hãy copy đoạn code sau và dán vào Giao diện > Tuỳ biến > Custom 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)
}

Chúc các bạn thành công. Nếu có thắc mắc hay gặp vấn đề gì hãy comment xuống bến dưới để mình hỗ trợ nha. Cảm ơn các bạn đã quan tâm đến hungshare.com.

Bài viết liên quan

Đánh giá bài viết

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *