I have a grid of images that have a series of hover interactions and are all clickable as links.
When the mouse hovers over an image, the captions of the image are revealed and the image is ‘soloed’, meaning that the other images in the grid either go fully transparent or completely disappear (depending on the two types of content in the grid)
The issue is that if I make each image a div block with an image and a link block inside, the hover interactions are buggy and act strange. I thought this was a Webflow error, but from talking to Webflow support I have learned that it is relating to how initial states work. Essentially, my interactions wont work unless there they are effecting the element and not a div block with elements inside.
It works fine when it is just a grid of images, but to make each image a clickable link, it requires it to be in a div block with a lick block and the image. The best solution would be to use a link block with a background image, but by doing this, the size of the link block does not adapt to the size of the image. I have to define the size of the link block, which does not keep the grid consistant with varying image proportions and at varying screen sizes.
I would love to be able to a link block to the grid, add an image, and have the block be sized in the grid the same way that images of varying sizes are (see attached image of size properties)
Essentially my question is whether or not it is possible to have the background image of a block actally effect the block itself, as if there is an image inside it.
If not, maybe there is a solution where I can put a link on an image without putting it in a div block with a link block.
Thanks so much in advance 
Here is my site Read-Only: (Webflow - Copy of REIR)