Not quite sure how to explain this but I’ll do the best I can, as the title suggests I’m looking to trigger a different hover effect on each of the child elements when hovering over a parent element.
So in my example project (under the ‘projects’ section), when hovering over any of the 3 projects I’d like the background to change colour, the image to fade and there to be an underline effect on the heading, all at the same time, when hovering anywhere in that parent div (so not just when hovering over that specific element). Is this possible using webflow (or CSS)? I’ve definitely seen it done on websites before but not sure if this is too advanced.
That sort of interaction is definitely possible in Webflow. I recorded a video to get you started creating the kind of interaction you’re looking to achieve. Let me know if you have any questions as you get into it!
Hi @blakelam !
Your video of interactions were helpful. On a related animation question, Webflow University has a video Custom dropdown menu - Webflow interactions & animations tutorial - which I was able to replicate. At the end of the video he notes a developer can use a hover in / hover out as a trigger for the animation. What is not addresses is that hovering OUT of the TRIGGER, the animated elements (the link blocks) recede where they can’t be selected.
A successful instance of the hover drop down menu would have the dropdown appear when hovering on the trigger exposing the dropdown content div link blocks and allowing the user to select one of the link blocks exposed
In my instance, the dropdown content disappears hovering off the trigger.
I’ve tried using the wrapper div (containing all the elements) to trigger the hover animation and also the dropdown content div to trigger the hover animation without success. Not sure about using a delay (in the settings) or a different trigger or what to keep the link blocks visible while hovering over the link block elements.
