Jump to content
Search Community

Overlay end and slide from left to right on mouse leaves

Narendra Verma test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

I have a button. When a user hovers over it then blue overlay will come and slide from left to right and stop until the mouse leaves. There is no issue here. It's working.

Now

If the user removes the mouse hover then I have to end the blue overlay from left to right and It will come on the normal button.

 

When I remove the mouse hover it's going to the right to left side.

Also when hover on the button "How can I change the color of text and arrow"?

 

Thanks in advance.

 

 

See the Pen JapPbV by Narendra_verma (@Narendra_verma) on CodePen

Link to comment
Share on other sites

Hello @hybreeder and welcome to the GreenSock Forum!

 

For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index.

 

Forking @mikel  codepen of your codepen.

  • You should wrap your anchor tag (.tbtn) text with a <span> tag
  • Give that span CSS position: relative and z-index: 2
.t_btn span {
  position: relative;
  z-index: 2;
}

 

<a href="javascript:void(0);" class="t_btn btn_bg t_btn_about">
    <span>Hover me</span>
    <div class="hover_overlay"></div>
</a>

 

Then:

  • give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values)

 

See the Pen PdQWYJ by jonathan (@jonathan) on CodePen

 

Happy Tweening! :)

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...