Đ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.

Copy và paste đoạn CSS sau theo đường dẫn: Flatsome -> Advanced > Custom CSS -> ô ALL SCREENS

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

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

Trả lời

Chat với chúng tôi qua Facebook
0888.090.898