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.