I have a design with a CMS Collection list, which is a 3x3 grid of features.
I have set it up with an interaction to show an image and bg color when hovering on the link block.
Here’s the structure:
collection list wrapper
.collection list
…collection item
…link block
>Div block (with image and show-hide interaction)
>Div block (with feature name and description)
The interaction is working fine, but when I hover, the image div block appears and pushes the 2nd div downward. This creates a bunch of empty space in the row for the features not affected by the hover.
Instead, I’d like the image div to appear upwards and on top of any other elements, without changing the position of any other elements.
Any ideas?