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.
Here is my public share link: https://preview.webflow.com/preview/commit2bfitpt?preview=bfe02aa60c7b10f1c6360c30bf1d9f7f