Help with photo scale and text overlay interaction on hover and click for mobile

Hello,

I’d like to create a hover interaction for the desktop and click interaction for mobile. I’ve found an interaction I like online at this website, http://innofthelostcoast.com/. If you look at the rooms and suites box on that page, this is essentially what I want to create. What I’d like to do is take the training services on my website and create the photo scaling effect as well as the text overlay. I’m not sure how to get the box to show more of the photo when scaled down on hover, as you will see in the two photos I’ve uploaded (notice the glasses on the counter now appear after the hover). I’m guessing it is some kind of hide overflow or something. I’m also having trouble with the opacity on the overlay so that it takes up the entire box at all responsive sizes. Any direction on how to make this happen would be great.

Thanks,
Felicia


Here is my public share link: https://preview.webflow.com/preview/commit2bfitpt?preview=bfe02aa60c7b10f1c6360c30bf1d9f7f

Hi, your public link isn’t working. Can you double check it and change it?

I’m not sure what would be wrong with it, here it is again, https://preview.webflow.com/preview/commit2bfitpt?preview=6799573dac1a1fac00118796ea684485

That time it worked. To achieve this, you will have to add an interaction which shows the alternate text and zooms the image.

I don’t have time at the moment to make a video on how to do this so I will try to explain it. You must make a container div which will hold your image and text. The container should be set to overflow hidden. You will then create a hover interaction on that div that will zoom the image in using the scale option. The text showing up is the the same as on the tutorials for interactions for the fade in on load animation. https://help.webflow.com/article/how-to-set-up-a-hover-interaction

You must also make sure you check the box for limit to nested items on the interaction!

These may also help http://forum.webflow.com/t/zoom-out-images-inside-a-div-on-hover/22730/4
http://forum.webflow.com/t/resolved-how-to-make-lightbox-thumbnails-zoom-on-hover/13358/7

I’ve set everything up but the photo is not showing the overflow part of the photo when it is scaled down. Did I do something wrong?

What page and where are you trying to do this?

Also i noticed you have a success form page, this isn’t necessary. You can simply add that same text to the success area of the form and it will load in the page without redirecting.

Select the error and success class and you can add a style and change them however you like.

On the training page with all the training boxes. There is a gap when you hover over the box between the photo and the container div. What I want is to expose more of the photos when hovered.

That type of interaction isn’t meant to work on a slider and will cause issues with the slider functionality. There is a warning above the interactions menu that warns against trying to do this.

I suggest using a tabs component instead.

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