Change image on hover with scaling up and vice versa

[OlgaBorodchak]

Hello everyone,

 

I'm stuck with this animation.

The ".hover-img" should fade out on hover, and the ".zoom-item-15" should scale up. When the hover ends, the ".hover-img" should fade back in, but it is not happening. Any idea what could be the issue?

 

thanks in advance 

See the Pen pomrQoM by olgaborodchak (@olgaborodchak) on CodePen

[GreenSock]

Are you trying to do this?: 

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

 

I saw several problems: 

1. The thing you're trying to fade in/out is at the BOTTOM of the stacking list, so it does no good to fade it. I think you meant to fade the thing on top of that, right?
2. You had a :hover state making the bottom element go to opacity: 0
3. You had a CSS transition applied

I hope that helps. 

[OlgaBorodchak]

Thank you Jack for reply.

 

I have a grid gallery, and I need to change images on hover. Some of them have additional animations like scaling and fading in/out elements.

Fading in/out elements works well with the :hover statement until I add scaling.

 

https://codesandbox.io/p/sandbox/animation-n2xs6s?file=%2Fsrc%2Findex.html%3A16%2C45

 

Maybe I need to change images on hover by using GSAP not CSS?

 

[GreenSock]

That issue actually has nothing to do with GSAP - it's how stacking contexts work in browsers. When you apply a transform of ANY kind or even if you only apply will-change: transform, it creates a new stacking context. Feel free to remove GSAP completely and just add that CSS and you'll see what I mean. 

 

I'm a bit confused as to why you'd expect the stacking order to work properly like that - you've got the thing you're fading BEHIND a fully-opaque element, but you seem to be expecting it to act like the semi-transparent thing is in front. Why not either order the elements correctly in the markup -OR- use z-index to have them in the proper order? 

[OlgaBorodchak]

Jack,

Maybe it's because I'm a beginner and still learning? 😊

But thank you for highlighting my weaknesses. Now I know what I need to work on. I didn't mean that there is something wrong with GSAP. I thought maybe I was not applying it correctly in this case.

 

Yes, I need to find another way to change the photo on mouse enter.

 

🍦

 

[GreenSock]

Oh, I hope it didn't come across like I was trying to highlight a personal weakness of yours. Not at all! We welcome all GSAP-related questions here and embrace beginners for sure! 

 

Is it clear how you can accomplish what you wanted? If you want an image to appear like it's on top of other things and fading out to reveal them, just make sure that image is ON TOP of the others. You can do that either by making sure the markup is ordered properly, or by using z-index. Just remember that z-index only affects elements that have position set to relative or absolute. That's another CSS/browser thing. 

 

Good luck! If you get suck, feel free to post another minimal demo (CodePen) and we'd be happy to take a peek.