Jump to content
Search Community

Img overlay 2 background colors

Emilek1337 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

Is it possible to create an image overlay that has the colors of the background? I'm revealing the images by putting an overlay on the images and then tweening the width of the overlay from 100% to 0%. But how can I do it when the background has to colors like here? http://rsk.by/

In this example the background is like 80% green and 20% white, but the image is still revealing because of the overlay changing it's width i think. How can I achieve this? 

Link to comment
Share on other sites

Hi @Emilek1337. Welcome to the forums. 

 

I'm not sure I really understand your question. Is this related to GSAP somehow? Are you just asking how to make the background color of a <div> something specific? Sorry if I'm missing something obvious here - I read your question a few times and I'm still kinda lost. 

  • Like 3
Link to comment
Share on other sites

I'm a little confused by the question too. 

 

Are you talking about that first animation where the picture overlaps the green background? If that's the case, I'd just use a clip-path or mask to reveal the image rather than a solid color overlay. If you put the image in a SVG and use a clip-path, you should get support across all browsers.

 

Happy tweening.

 

  • Like 3
Link to comment
Share on other sites

13 minutes ago, PointC said:

I'm a little confused by the question too. 

 

Are you talking about that first animation where the picture overlaps the green background? If that's the case, I'd just use a clip-path or mask to reveal the image rather than a solid color overlay. If you put the image in a SVG and use a clip-path, you should get support across all browsers.

  

Happy tweening.

 

Yes I mean the image that is revealing on the green background, it has 2 backgrounds, and I think you just provided me a solution, however I don't really understand how I can animate it, could you provide me a codepen if possible? Until now I just covered the image I'm animating with a overlay and animated the overlay to width: 0, and it worked every time, but now I'm struggling cause the background has 2  colors just like in the example.

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...