(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Tutorial Video:
Introduction – Add Animated Shine to any Element in Elementor
In this tutorial, we will add a animated shine effect on elements when we hover on them.
Magentic Pull Code
- dm-shine-item is the CSS class given to any element that requires shine.
- We are using pseudo-element :after to add the shine so if your widget/element is using :after element already then it will maybe not work. You can try changing :after in the code to :before.
- Also overflow hidden is added as we move the shine gradient outside the element and move it along the element on hover. So making overflow hidden, makes sure that any element outside the container is not visible. If not done, then our white shine gradient will be visible.
<style>
.dm-shine-item{
overflow:hidden;
}
.dm-shine-item::after{
content:"";
position:absolute;
top:0;
left:-150%;
width:100%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.5),
transparent
);
z-index: 9;
transform:skewX(-25deg);
pointer-events:none;
}
.dm-shine-item:hover::after{
animation:shine 1s ease forwards;
}
@keyframes shine{
to{
left:150%;
}
}
</style>
