[Tutorials] Create a light effect when hovering on an image in Flatsome

Beautifying the website through CSS effects is one of the ways that many web designers are using today. In particular, the light effect when hovering over the image seems to be very popular with you ^^

Today, flatsomea-z will show you how to create a light effect when hovering over images in Flatsome extremely simple.

[Tutorials] Create a light effect when hovering on an image in Flatsome

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

Goodluck!