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

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>