GRID positioning problem

Hey Guys ~ I have a project using a massive grid with images set randomly, all over the place. For 30% of them, I need to have a div display text and content below the image. The problem is that when this content is displayed it shifts all the other images within the grid below it when it’s expanded.

here is a video of the issue: Dropbox - File Deleted

https://preview.webflow.com/preview/arc-hive?utm_medium=preview_link&utm_source=designer&utm_content=arc-hive&preview=ebd5d829b20807b2c4da4d5a1d237a29&workflow=preview

Thank you x10 for any help in advance

Here’s the solution I came up with.

https://www.loom.com/share/b8e5ab62dfe84dbd85c7455cb757915e

1 Like

Thank you Hamza ~ I found a workaround for this and it was easier than I thought at first. Actually, there are a few ways to avoid this issue, and this hide/show problem which caused content to shift I eliminated by simply setting the content div to opacity 0, until I hover, which would then show the content (which was always there but hidden). This obviously is a problem on mobile, but the site is quite a different design and will have a slightly different mobile layout anyhow. Thank you again :slight_smile:

That’s great. Glad you found a solution yourself.
Happy learning!