Add Classes

Example 6: Interactions (Hover Color)

We apply our classes linked with Webflow Interactions to apply a different Interaction on every other item in our Collection List. Each item will have a unique background color on hover.

See Finsweet
Walkthrough

What we will cover

The structure of our CMS Collection List
Establishing all of the add-on classes on a static structure
Setting up our array (list) to hold all of the class pairings. In this How To our add-on classes apply different Interactions to every other item
The .addclasses() component to add unique classes inside the Collection List
An explanation of start and frequency

2019

Project 1

Branding, Web Design

2020

Project 2

Branding

2017

Project 3

Web Design

2018

Project 4

Development

2018

Project 5

Development

2018

Project 6

Motion Graphics

2019

This is some text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and content.

‍

2019

This is some text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and content.

‍

2019

This is some text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and content.

‍

2019

This is some text

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and content.

‍

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.