Fill text hover effect

[Gabriela]

Hello, for the header of my website i would like to have this type of effect when the user hovers on my name: https://www.youtube.com/watch?v=GS4hFHqZlUQ

Is this possible?

Thank you!

[David]

Hi there,

can you link me to your site so i can see the header content ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gabriela]

Absolutely

[Elvin]

Hi,

Your reference provided the code. You just need to replace the selector.

Example:

.elementor-element-45049c2 .elementor-widget-container h1 a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 120px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: gray;
}
.elementor-element-45049c2 .elementor-widget-container h1 a:before{
  content: 'GABRIELA URBANO';
  color: black;
  position: absolute;
  width: 0;
  overflow: hidden;
  transition: 0.9s;
}
.elementor-element-45049c2 .elementor-widget-container h1 a:hover:before{
  width: 100%;
}

A wise man once said:
"Have you cleared your cache?"

[Gabriela]

By using that code, the whole header disappears. I tried modifying it a little, but it still does not look right

[Elvin]

Since you’re working w/ Elementor Heading widget, try this code instead:

selector h1{
    overflow:hidden;
    position: relative;
}

selector a:before{
    content: 'GABRIELA\a0 URBANO';
    color: black;
    position: absolute;
    overflow: hidden;
    transition: 0.9s;
    width:0;
}
selector a:hover:before{
    width:100%;
}

After adding this, go to the Heading Setting’s Advanced > Positioning setting and set the “Width” setting to “Inline”. Then go to the heading’s container direct container column and set its horizontal alignment to center to keep it center.

You should arrive at something that looks something like this:
https://share.getcloudapp.com/X6udjkgX

A wise man once said:
"Have you cleared your cache?"

[Gabriela]

It did not change color

[Elvin]

Try this:

selector h1{
    overflow:hidden;
    position: relative;
}

selector a:before{
    content: 'GABRIELA\a0 URBANO';
    color: yellow;
    position: absolute;
    overflow: hidden;
    transition: 0.9s;
    width:0;
}
selector a:hover:before{
    width:100%;
}

Here’s a demo of this animation. demo site

Here’s a demo video of the settings: https://share.getcloudapp.com/6quP19oO

A wise man once said:
"Have you cleared your cache?"

[Gabriela]

Oh I see, I do not have the pro version of elementor, so I have been adding all my code into wordpress

Is there still a way to do it?

[Elvin]

Oh I see, I do not have the pro version of elementor, so I have been adding all my code into wordpress

Is there still a way to do it?

Oh if that’s the case, we can revert back to the specific selectors from previous replies.

.elementor-element-45049c2 .elementor-widget-container h1{
    overflow:hidden;
    position: relative;
}
.elementor-element-45049c2 .elementor-widget-container a:before{
    content: 'GABRIELA\a0 URBANO';
    color: yellow;
    position: absolute;
    overflow: hidden;
    transition: 0.9s;
    width:0;
}
.elementor-element-45049c2 .elementor-widget-container a:hover:before{
    width:100%;
}

A wise man once said:
"Have you cleared your cache?"

[Gabriela]

It work for the most part, but it looks like if there was more text on top

[Elvin]

Strange,

It should work as shown on the demo site and videos. Perhaps there are other settings that prevents the :before from displaying properly.

Note: Since this is a 3rd party plugin outside of GeneratePress’ scope, you may wanna try asking Elementor’s support about this as well. They may have another angle regarding this issue.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts