Image zoom on hover not working

Design help Animations & Interactions
1

Hi,

I am trying to make an image zoom on hover, but I don’t want the div to expand beyond its container. Something like this: Image Hover Effect from @aaronocampo and I also tried changing the size of the bg image on hover, but none of that worked. I gave the container measures so it will stay the same, but still not working.

I hover over the image and it bleeds out of the container. Could someone let me know what am I doing wrong?

https://cl.ly/0f2e1W2m1O2B

Here is my public share link: https://preview.webflow.com/preview/lafabbricapizzeria?preview=fadaf9228455801c1045a15f2168bd10 Please go to page: encuentranos 3

2

Hi @Sebasgaes,

Oh, great question!

To have the container stay the correct size, but the background zoom - you can add overflow:hidden to the parent element as seen in the quick screencapture that I created: https://drive.google.com/file/d/0BynZs0dQwPd_YndMODJGaWM0RGc/view

Hopefully this helps :blush:

  • Micah
2 Likes
3

Thanks, that fixed it.

4

Just one more question if you have the time, how could I make the text and button to stay the same size?

https://cl.ly/0c3g1F2E1V2a

5

Hi @Sebasgaes,

That can definitely be done! :wink:

I just looked at your Webflow project, and see you are changing your interactions. Are you still interested in the zoom effect?

6

Hi Micah, yes but since I was not been able to accomplish what I wanted, I kinda changed it. I want to do the same as this page over here 4 Rivers Smokehouse Locations - Best BBQ in Florida but I have not been able to figure out how to accomplish all the interactions at once (zoom on hover, dark background and change color on hover, moving text and button) I know how to them separately but, for instance I was trying to change the color on hover but none of the transitions worked to make it wait 500 ms. Let me know if I was clear enough, otherwise, I can elaborate better.

Thanks Micah,

1 Like
7

Hey @Sebasgaes,

After a little bit of testing I was able to recreate the interaction. To do so, follow the following steps:

  1. Add a wrapper div
  2. Place the line and button within the wrapper
  3. Create an interaction where the wrapper moves from 0% opacity to 100% opacity when the user hovers over the Div Block
  4. Then, create an additional interaction where the title moves up 10px on hover and back down 10px when the user hovers out of the fotos container

You can view the steps in the following quick tutorial: https://drive.google.com/file/d/0BynZs0dQwPd_aEtKOFlfNVp2QmM/view

Hopefully this helps :blush:

8

Hi @Sebasgaes,

Also, I just found a solution for the background color issue you’ve been experiencing.

Check out the steps that I completed to make it work: https://drive.google.com/file/d/0BynZs0dQwPd_TkZUYkkwSVh4ck0/view

Hopefully this helps :blush:

9

Hi Micah, I got caught up in another project but I’m putting to work your suggestions. As soon as I do, I´ll let you know. Thank you very much for helping me.

1 Like
10

Hi Micah, I just did the interactions, thank you for your help.

Cheers,

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.