Scale Hover Interactions using Lightbox

Design help Animations & Interactions
1

Hi all :slight_smile:

I’m trying to make similar hover interaction as shown here B-sides - Esben Oxholm - Freelance CG Artist - Product Images and Animations
Tried a couple of tutorials with no luck. when I’m hovering my image scale over the lightbox dimensions instead of being bound by its size.

Any suggestions?
Tnx,
Itai

Here is my public share link: [LINK][1]

2

Hey itai_miller!

Welcome to the forum :partying_face:

I can see that you want to have an image zoom out when on hover and then zoom back in when it’s no longer being hovered on. The way to do this is to set a Mouse Hover interaction on the parent element of the image (in your case it is Lightbox Link). However, when building the animation, make sure you select the image element from the navigator (Image 6 in your case).

Check out my video for some of the specifics of what I did.

Something that I didn’t have time to mention in the video is that the Lightbox Link needs to be set to Overflow Hidden. Overwise the image will spill outside of the div block that it’s supposed to be contained within.
image

I hope that helps!
Tyler

3

Hi Tyler,
Thank you so much for the quick & comprehensive answer! it worked great :slight_smile:
Highly recommended solution!
Thanks again,
Itai

1 Like