How can I make individual divs show/hide on hover for each accreditation image in Webflow using legacy interactions?

TL;DR
  • Add a div block for each accreditation image to show/hide on hover.
  • Use legacy interactions; set "Mouse Over" triggers for images.
  • Set the div's initial appearance to hidden with 0% opacity or display none.
  • Configure hover in action to show the div with 100% opacity.
  • Configure hover out action to hide the div with 0% opacity or display none.
  • Repeat for each image-div pair to ensure independent animations.

To animate individual divs to show/hide on hover for each accreditation image in Webflow using legacy interactions, you'll need to set up interactions for each image-div pair.

​

1. Set Up Your Elements

  • Add an Image: Ensure each accreditation image is properly placed on your page.
  • Add a Div: For each image, have a separate div block you want to show/hide upon hover.

​

2. Apply Legacy Interaction

  • Select the Image: Click on the first accreditation image that you want to make interactive.
  • Add a Legacy Interaction: In the Interactions panel, choose to add a legacy interaction. Select “Trigger” > “Mouse Over”.

​

3. Set Initial Appearance

  • Initial Appearance: Ensure the div is initially set to hidden by interacting with the initial appearance settings. Set the opacity to 0% or adjust the display setting to none.

​

4. Configure Hover In Interaction

  • Add Hover In Action: In the interaction settings, create an action for when the mouse hovers in. Set your div to display (for example, change display to block) and adjust opacity to 100% if you’ve set it to 0 initially.

​

5. Configure Hover Out Interaction

  • Add Hover Out Action: Create a separate action for when the mouse hovers out. Reverse the settings to revert the div back to hidden (display none and set opacity back to 0%).

​

6. Repeat for Each Set

  • Repeat Process: Repeat steps 2 to 5 for each accreditation image and respective div you need to animate. Make sure each interaction is uniquely tied to each image-div pair to ensure independent animations.

​

Summary

To achieve show/hide on hover for your accreditation images using legacy interactions in Webflow, apply a mouse over legacy interaction to each image, configure the initial state of the div, and then set the appropriate settings for hover in and out actions. Repeat the process for each image-div combination.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is there a workaround to output data from an API that is currently being blocked on my Webflow page?
How can I quickly duplicate a prepopulated CMS Collection Page in Webflow and easily modify its contents without manually copying and pasting fields or using the bulk import function?
How can I remove the green color that appears when selecting a section in the navigation bar for mobile on Webflow?
How can I remove the default greyish gradient styling from the select element in Webflow?
How can I grab a Webflow collection based on its ID and store it in a variable? Can someone provide a snippet or example image? Also, is there a way to link embedHTML on the same page to share or access variables from each other (top-bottom)?
How can I create a looping animation in Webflow that starts on page load and repeats infinitely?
How can I adjust the tablet breakpoint in Webflow to display the nav menu (hamburger menu) at an earlier pixel width, such as 1150px instead of the default 992px? Is there any custom code or integration that can help me achieve this?
Has anyone found a way to create a copy to clipboard button in Webflow that can dynamically copy the link of a CMS item without manually creating a link for each button? Thank you!
How can I embed the real-time menu from SinglePlatform onto my Webflow website?
How can I add more text and images/videos to specific project template pages in Webflow without them being repeated on all pages? Do I need to create more components or use properties? Thank you!
How can I show ellipsis (...) when text is cut off in a Webflow textbox due to the size of the block? Can anyone provide the necessary code or solution? Thank you!
How can I display the URL content using the EMBED in a container with the code set to Webflow? It currently only shows the link on the page.
What does it mean when I see the message "No value passed for parameter 'siteSlug'" after adding my GA Measurement ID in Webflow and saving changes, and could this be related to using a .studio domain for my website?
How can I connect a subdomain (ad.kimberleyplastic.com.au) to a Webflow hosted site while keeping the main domain (kimberleyplastic.com.au) pointed elsewhere? I have already set up the subdomain with the Webflow A-Records.
Is it possible to design and develop a website in Webflow and then connect a third-party headless CMS, such as Hygraph or Sanity, by using custom JavaScript code with API calls? Does Webflow support GraphQL integration for this purpose?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?