New to Webflow but LOVING IT. Chugging along on #21dayportfolio.
I’m trying to grab the custom color from a CMS collection to apply on the hover state of a button within a collection item. Dug through previous topics but couldn’t find something that worked.
I placed an embed block within the collection item in order to insert some CMS fields. I think I got it to grab the first item’s custom color but don’t know how to put the Slug in there to make it unique for each one.
Here’s the limited code I have:
<style>
.not-work-collection-item .fancy-button:hover {background-color: [CMS COLOR FIELD] }
</style>
In the custom code you actually have to put some HTML code to create the element and add the class.
make sure the col item element is position:relative
create a div in webflow in the col item and style it as desired, using position:absolute to make it take all the space of the item, adjust with z-index value. Then copy the name of its class, then delete it
in your custom code element declare the div like this: <div class:YOURCLASS [SLUGFIELD]></div>
add custom CSS to make the hover bring the cms color.
Hello Vincent, thanks for your help! Really appreciate it.
Forgive me, I’ve watched that Twitter video and read your reply like 10 times and can’t figure out how to make it apply to my use case. Regarding your response:
1. make sure the col item element is position:relative I think this is the only thing I did correctly. I made the “col” (collection, right?) item position relative. YAY
2. create a div in webflow in the col item and style it as desired, using position:absolute to make it take all the space of the item, adjust with z-index value. Then copy the name of its class, then delete it Ok I added a Div inside the collection item and styled it as the button I want. I applied the absolute position to it and all collection items stacked on each other (expected?). Adjusting the z-index value didn’t have any noticeable effect. I copied the name of the class, then you said to “delete it”. Not sure what you meant by “it” so I deleted the entire Div.
3. in your custom code element declare the div like this: <div class:YOURCLASS [SLUGFIELD]></div> This markup was a little unclear. Isn’t it “class=” and not “class:”? Also, are there any quotation marks? I tried<div class="[class name of the div I just deleted]" "[SLUG FIELD]></div>
4. add custom CSS to make the hover bring the cms color. Not sure what CSS would do this. By this point I was unfortunately lost.
Public share link again here. Thanks again for your patience and help with this!
