How can I fix the image reveal interaction on hover in the first and second rows of the LATEST WORK section in Webflow?

Published on
September 22, 2023

To fix the image reveal interaction on hover in the first and second rows of the LATEST WORK section in Webflow, follow these steps:

  1. Open your Webflow project and navigate to the page where the LATEST WORK section is located.
  2. Select the element that contains the first row of images in the LATEST WORK section. This could be a div block or a grid container.
  3. Inside that element, locate the image element that you want to apply the image reveal interaction to.
  4. Click on the image element to select it, and go to the Interactions panel on the right-hand side of the Webflow Designer.
  5. In the Interactions panel, click on the "+" button to create a new interaction.
  6. Choose the trigger for your interaction. In this case, you want the interaction to trigger on hover, so select the "Hover" trigger.
  7. Select the "Mouse over" option from the Hover trigger's dropdown menu.
  8. Click on the "+" button beside the "Affect" section to add an action to the interaction.
  9. From the dropdown menu, select the "Start an animation" action.
  10. In the animation dropdown, select "Reveal" or any other animation you prefer for the image reveal effect.
  11. Customize the animation properties such as duration, easing, and delay to suit your design preferences.
  12. Repeat steps 3 to 11 for the second row of images in the LATEST WORK section.

By following these steps, you should be able to fix the image reveal interaction on hover in the first and second rows of the LATEST WORK section in Webflow.

Additional Questions:

  • How do I create image interactions in Webflow?
  • Can I apply different interactions to different images in the same section?
  • Is it possible to add a delay before the image reveal animation starts on hover?