Jump to content
GreenSock

Adan Rodriguez

Create layer over the top of content on click?

Recommended Posts

After searching for answers, I could not find anything with the same context. I am trying to create this effect: 

See the Pen rNKBbog?editors=1010 by AdanRod133 (@AdanRod133) on CodePen

 on top of the movie container.

I would like that layered on top of the content after the "Add to watchlist" button is clicked using regular elements, and layering. What is the best approach to this? Thank-you! 
 

See the Pen jOKEyMN?editors=0100 by AdanRod133 (@AdanRod133) on CodePen

Link to comment
Share on other sites

Hi,

 

I read your question a few times and I'm not completely sure of what you're trying to achieve here.

 

I went ahead and assumed that is something like this:

See the Pen KKewyzP by GreenSock (@GreenSock) on CodePen

 

If not, please be more specific about what you want, because mixing both codepens into one shouldn't be too complicated.

 

Happy Tweening!

Link to comment
Share on other sites

Thanks for your time Rodrigo! Lets see if I can explain it a little better. When you click the "Add to watchlist" button, there should be an overlay effect where a transparent green overlay flashes over the content Does that help explain a little better?

 

 

 

Also: 

 

Is there a difference between "Masking" and an "overlay"? The green flash effect would be slightly transparent and be blanketed over the top of the content for a quick second. 

 

Link to comment
Share on other sites

Hi Adan,

If I am understanding right, is this the effect you want ? 

See the Pen XWYJVrz by tcb2307 (@tcb2307) on CodePen

Sorry if my code is a bit messy.

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Awesome! Thank-you. Instead of the just the photo, I want it over the entire content. Is there a specific name for this type of effect, so I can do a bit better search next time I need something like this? 

Link to comment
Share on other sites

Thanks to  @Andy Bui's contribution and adjusting to my needs, I'm getting very CLOSE to the effect I'm looking for: 

See the Pen gOKpYZo by AdanRod133 (@AdanRod133) on CodePen

 

but the content is flashing UNDER the content and i'd like it to flash OVER the content. Am I coding this correctly? Is this a conventional approach to solve this problem @Rodrigo? If I remove the "z-index: -1" property, then the div covers the element and the button is no longer clickable. 

Link to comment
Share on other sites

Hi,

 

There is no need for the z-index unless other elements in the main container have a position set. Also is better to just add the overlay at the end of the HTML.

 

Here is a fork of your codepen, I changed a few things in the HTML, CSS and the animation:

See the Pen WNyvNjB by GreenSock (@GreenSock) on CodePen

 

Let us know if you have more questions.

 

Happy Tweening!

  • Like 2
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.
×