Use Webflow's Embed Component to add elements with a unique class inside of CMS Items in a Collection list
The example below shows how to create a different colored :hover state for each CMS Item in a Collection List, based on a color field of that Collection.
There's one unique color field in the Collection, it's used as an accent color for the titles of the cards, and in a faded version for the :hover state.
Demo Hover over the Collection List of cards below: there's a different :hover color for each of the CMS items.
You can clone this entire website in your Webflow account from the project page, then inspect this page to see how it's built, or you can read about the building details below.
Principle
We use an Embed Component to add HTML and CSS Custom Code inside of the Link Block of the CMS Item.
Using HTML, we add a div, and we use a dynamic field to declare a class for it. Here we target the Slug CMS field, as a slug is almost always eligible to be a class name (just dont start the slug with a digit, it has to be a letter).
Using the Slug as a class name, we make sure that the div has a unique class, in each of the CMS Items.
Using CSS code, we add styling properties to the div: it expands all the way inside of the Embed Component div using width and height, and it gets a semi-transparent white layer using linear-gradient, in order to tame the color we will display on :hover, giving just a hint of the accent color used by the title and the image above.
We then add the background-color property, set to the dynamic color field from the CMS collection, on the :hover state of the same div.
As the dynamic fields has to somehow be processed, the results of the custom code can't be seen in design mode. To test it, you have to click on Preview.
Here is the structure used for the Collection List and the Collection Item
The Embed Component contains the following code.
❮❯ code
Prerequisites
- The Link Block, defining the content boundaries of the CMS Item, must contain all the content and the Embed Component. It has to be position:relative — or any other value other than static)in order for the colored div to be set to absolute inside. (set those properties in the Style Tab in the Designer).
- The Embed Component must be inside of the Link Block element, on top of the content elements of the CMS Item in the Navigator view. It can be position:absolute and expand all the way inside of the Link Block using width:100% and height:100% (set those properties in the Style Tab in the Designer).
- The content elements inside of the Link Block (title, paragraph and image) have to get a pointer-events:none CSS rule in order for them not to register :hover events. They become "transparent" and don't affect the :hover event on the colored div underneath. this has to be set with custom CSS code in the Embed Component (see line 19 of the Custom Code).They also need to be set to position:relative in the Style Tab of the Designer, in order to increase their specificity, so they don't disappear behind the colored div.
Meet me on Twitter if you come up with other use cases using this technique.