Hi guys,
I’m looking to create a page load effect, using the hero images of my CMS list, cases.
Here’s the inspiration i’m trying to replicate: https://www.executiveagency.ca/
I’m stuck when it comes to handling the CMS items in my list. I want to show 3 images, but it’ll only show me 1 class, and I need 3 classes to animate each image in Interactions.
Anybody know how to create classes for the other CMS items?
Here is my public share link: LINK
(how to access public share link)
CMS can be a little awkward to work with styling individual items differently. The editor only let’s you individually style the first, last, odd, and even items by default.
You could work around it by either using 3 separate collections, each limited to 1 item, and start from 1, 2, and 3 respectively. This way you can apply individual styling to each one.
Alternatively you could use custom css like
.case-1:nth-child(1) { first child styling here }
.case-1:nth-child(2) { second child styling here } etc etc
If you’d prefer to stick to using the editor I’d go with option 1.
Welcome to the community!
Currently the most straightforward way to add classes to individual CMS items is with FinSweet’s CMS library, specifically the class adder script. Check out their detailed library to learn more about it. There are also tutorial videos to support each tool in the library. https://www.finsweet.com/cms-library/add-classes