Fill text hover effect

Hi there,

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

Absolutely

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%;
}

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

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

It did not change color

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

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 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%;
}

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

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.