Elementor text hover effect – Fill text with color Using CSS

by | Jun 16, 2020 | 0 comments

Elementor text hover effect – Fill text with color Using CSS

by | Jun 16, 2020 | CSS Tips and Tricks | 0 comments



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