In this video learn how to achieve text fill effect on hover using just Elementor and pure CSS.
Get Elementor Pro:
https://bit.ly/designelementorpro
We just use a pseudo element :before, Css transition and CSS position property to achieve this with Elementor heading widget element.
CSS code for this effect:
selector .elementor-heading-title
{
position: absolute;
top:40%;
left:40%;
color: gray;
}
selector .elementor-heading-title:before
{
content: ‘Elementor’;
color:black;
position: absolute;
width:0;
overflow:hidden;
transition: width 0.9s;
}
selector .elementor-heading-title:hover:before
{
width:100%;
}
/*end of the code*/
source