I am trying to make a grid on my homepage with images and text over it. I put in div blocks in the grid and set the images as background images. Then I put the text as links in the div blocks with a mouse hover show/hide interaction. I’m having a few issues with this though. When I look at it published and I hover over an image, the entire image/block noticeably changes height. I would like the image to stay the same size when hovered over. Also, when I change the screen size, the width of the images is changing and zooming in, and the height isn’t changing at all. How can I make it so the image itself maintains its dimension ratio but shrinks with the screen size? How can I stop the images from zooming in and changing size when hovered over? (On the homepage of the site there are 2 different grids that were made in different ways… I’m talking about the second, bottom grid) Thank you. Below is a link to the site.
Webflow - Karen Kallins Photography is my public share link: LINK
(how to access public share link)