Question: How can I create an element trigger in Webflow that, upon hovering on one category, causes other div blocks to change to a different image for that category, and then revert back to the original image when not hovered?

Published on
September 22, 2023

To create an element trigger in Webflow that changes div blocks to a different image when hovering over a category, you can follow these steps:

  1. First, make sure you have added the necessary div blocks and images to your Webflow project. Each div block should contain the original image you want to display, as well as the alternate image that will be shown when hovering over the category.

  2. Select the div block that represents the category you want to hover on. In the Element Settings panel on the right, go to the Mouse Hover section.

  3. Under Mouse Hover, you'll find two tabs: On Hover In and On Hover Out. Click on On Hover In to set the action that occurs when hovering on the category.

  4. In the On Hover In tab, click the "+" button next to Affect different element(s) and select the div block that contains the image.

  5. Next to the selected div block, click the "+" button next to Animation and choose Transform.

  6. In the Transform animation settings, you can set various properties like scale, rotation, and opacity to make the image change when hovered over. For example, you can increase the scale and opacity to create a zoom effect.

  7. To revert back to the original image when hovering out of the category, go to the On Hover Out tab.

  8. In the On Hover Out tab, repeat the steps from 4 to 6, but this time set the animation properties back to their original values. For example, you can set the scale and opacity back to 1.

  9. Preview your website to see the changes. When you hover over the category, the div block containing the image should change according to the animation you set. When you move the cursor out of the category, the image should revert back to the original state.

By following these steps, you can create an element trigger in Webflow that changes div blocks to a different image when hovering over a category, and reverts back to the original image when not hovered.

Additional questions:

  1. How can I use interactions to change the color of a button when it is clicked in Webflow?
  2. Can I create smooth scrolling effect in Webflow?
  3. How do I add a custom domain to my Webflow website?