Hi everybody,
For some reason the collection items I have on the homepage are not displaying neatly in a 3x3 grid. The the 7th item is out of place. And the second problem I’m having is making all the image captions disappear BUT to only appear when someone hovers over the respective images. I tried changing the state to hover and changing the display settings but that just made it disappear completely. Any help will be great appreaciated.
The read-only version can be viewed at My Site
Hi, go to your “Collection List” wrapper and set to ‘Flex’… then wrap children. Additionally, the sizing of the div boxes could stretch if you wanted them to, so they’re all the same (size/height) regardless of content. You can find that in this tutorial: Equal height layouts with flexbox | Webflow University
Take care.
@garymichael1313 Thanks for helping to get it to display properly. I managed to get them to be equal size and height! Now I just got to find a way to get the hovering effect.
Awesome, glad to help… have a great day.
@Eden21 for the hovering effect, try this:
- Make Div Block 2 have opacity 0%
- Give Div Block 3 an interaction (this is the div that contains the image), with these settings: https://screencast.com/t/xCXe7Yr02Gs
If you do this you should be all set
Let me know if this helps.
@justin_c thanks I was able to get the hover effect working. But I ended up reverting back to the old style because it looks better. But thanks anyways.
@Eden21 glad to hear you’re all set now! If you’d ever like help with functionality (no matter how advanced) or design with any site feel free to DM me as I do freelance Webflow work as well.
Awesome, I’m gonna have to take you up on that offer! 
It’s not the “collection list wrapper” that needs the flex and children wrap, it’s the level below, the “collection list”!