Position CMS Collection Items Randomly in a Grid Layout + Display Elements on Hover

terrestrialpress · June 7, 2021, 10:07pm

I’m helping a friend who is hoping to create a site with 300+ randomly positioned CMS items. I was thinking I could accomplish this with a grid layout, but I’m open to other suggestions.

The idea is to create an open field in which users can scroll around and “find” different images. From there, the user would hover over the image to display text and a link related to each image.

Here are my sticking points:

When I set the collection list to grid, it doesn’t allow me to place collection items using manual positioning (it says, “Items inside dynamic lists are automatically placed.”) I’m wondering if there’s a way to auto-randomize which grid cell each collection item is placed in using custom code?
I’m hoping to create a hover effect on each image where text is displayed over a colored background on hover. The text is part of the CMS collection. I’m able to get the text to display on hover, but I haven’t figured out how to add a background color for the text that would be positioned between the image and the text.

Appreciate any assistance!

terrestrialpress · June 8, 2021, 3:01pm

Update: I figured out one part of the solution. If I create a bunch of blank collection items and change the sort order to “randomize” for the collection list, it positions the items randomly among the grid.

Still needing help to figure out how to make a color display with the corresponding text on hover.

I found a couple of related tutorials, but they’re not using the CMS or grid so I’m still unsure how to implement so that a background color displays over the image, but under the text.