Transform one element on hover of a different element | Class Adder for Webflow Interactions

Learn how to change background image on hover of a different element on your Webflow website.
TIMESTAMPS:
00:09 - Use case #3
00:33 - Live example
00:58 - Start of the tutorial
02:46 - The build - Finsweet Class Adder
06:12 - Thank you
CLASS ADDER FOR WEBFLOW INTERACTIONS: Trigger the add and remove of classes on click, hover, scroll in/out of view, or page-load with ‪@Finsweet‬'s Class Adder Interactions Tool for ‪@Webflow‬.
See all videos from the playlist: • Finsweet Class Adder f...
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Class Adder: class-adder.finsweet.com/#use...
Class Adder Webflow cloneable: finsweet.com/classadder-clonable
Class Adder Interactions Tool: class-adder-script-writer.fin...
Get FREE help with implementation: sweetjs.finsweet.com/
Subscribe to Finsweet: ruclips.net/user/Finsweet?su...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/fin-pro
🛍 Shop our merch store - finsweet.com/merch
💪 Superpowers for your Webflow website - finsweet.com/attributes
🧰 Your toolkit for Webflow - finsweet.com/extension
-----------------------------------------------
// SOCIAL
Facebook: / ​
Twitter: / thatsfinsweet​
Instagram: / ​
Dribbble: dribbble.com/thatsfinsweet​
Behance: www.behance.net/thatsfinsweet/​
Webflow: webflow.com/team/Finsweet/​
-----------------------------------------------
// TAGS
#ClassAdder #Webflow #Interactions
-----------------------------------------------
Thanks for your support! 🤟

[@utkcht]

This is amazing. Thank you!

[@Finsweet]

You're welcome!!!

[@saicharan7571]

Thank you

[@Finsweet]

You're welcome!!!

[@e11world]

This is great but I was wondering how I can apply this to a CMS collection to change the top & bottom to just the one image of each cms item (blog article for example). Dynamic content is a bit tricky I think

[@Finsweet]

Check this out: cms-library.finsweet.com/add-classes

[@e11world]

@@Finsweet thanks I'll look into this

[@e11world]

​@@Finsweet It doesn't seem like it answers my question after checking it. Still exactly like this except it's on dynamic items. That tut is just changing how items are laid out. I saw an example of z-index switching but all of these require all items to be visible. My example is where 4 different divs should change one div above on hover/click (like a thumbnail click to show larger image above) so that main pic needs to show only one image at a time (from the same collection). Seems like I need to duplicate my collection for each item to hover or do it manually.

[@LouisSlm]

Hey !
Thanks for tuto !
I tried it with ID but doesn't seems to work :/
What is the process using id rather than class

[@user-rv7ge1tc4l]

you are not showing how to switch between the site view and the code view... this is confusing for beginners