[Support request] Fill text hover effect

Home Forums Support Fill text hover effect

  • This topic has 11 replies, 3 voices, and was last updated 4 months ago by Elvin.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1512965
    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!

    #1513296
    David
    Staff
    Customer Support

    Hi there,

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

    #1514020
    Gabriela

    Absolutely

    #1514048
    Elvin
    Staff
    Customer Support

    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?"

    #1514773
    Gabriela

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

    #1515441
    Elvin
    Staff
    Customer Support

    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?"

    #1515447
    Gabriela

    It did not change color

    #1515459
    Elvin
    Staff
    Customer Support

    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?"

    #1515465
    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?

    #1515470
    Elvin
    Staff
    Customer Support

    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?"

    #1515471
    Gabriela

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

    #1515483
    Elvin
    Staff
    Customer Support

    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?"

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.