Image stack reveal on hover in Webfow

Step-by-Step Guide: Creating an Image Stack Reveal on Hover in Webflow

The image stack reveal effect is a modern, interactive hover animation where stacked images appear one by one as the user hovers over an element. This effect is visually captivating and works great for portfolios, galleries, or product showcases. Here’s how to create it in Webflow.

---

Step 1: Set Up the Basic Structure

1. Create a New Section:
   • Drag a Section from the Add Elements panel onto your canvas.
   • Name the section (e.g., Image-Stack-Section) in the Navigator for clarity.
2. Add a Div Block for the Image Stack:
   • Inside the section, add a Div Block. This will serve as the container for your stacked images.
   • Assign a class (e.g., Image-Stack-Container).
3. Set Container Positioning:
   • In the Style Panel, set the container’s position to Relative.
   • Add padding or margins if needed to align the stack within the section.

---

Step 2: Add the Stacked Images

1. Insert Images into the Container:
   • Drag Image Blocks into the container. Add as many images as you want in your stack.
   • Assign a class to each image (e.g., Stack-Image).
2. Style the Images:
   • Position each image:
     • Set the Position to Absolute.
     • Use the Z-Index to layer the images (higher values appear on top).
   • Optionally, apply subtle transformations like rotation or offset to create a natural stacked look:
     • For example:
       • Image 1: Rotate 2 degrees, Y offset -10px.
       • Image 2: Rotate -2 degrees, Y offset 10px.
3. Initial Opacity:
   • In the Style Panel, set the initial Opacity of all images except the bottom image to 0%. This ensures only the first image is visible before the hover interaction.

---

Step 3: Add Hover Interaction

1. Select the Image Stack Container:
   • Click on the Image-Stack-Container.
2. Open the Interactions Panel:
   • Go to the Interactions tab (lightning bolt icon).
3. Create a New Interaction:
   • Under Element Trigger, select Mouse Hover.
   • Choose On Hover In to create the reveal animation.
4. Set Up the Animation:
   • Click + Add Animation and name it (e.g., Image-Stack-Reveal).
5. Animate Each Image:
   • For each image in the stack:
     1. Select the image in the Navigator.
     2. Add an Opacity animation:
        • Start: Set opacity to 0%.
        • End: Set opacity to 100%.
     3. Add a Move animation:
        • Start: Move the image slightly down (e.g., Y: 20px).
        • End: Move it back to its original position (Y: 0px).
6. Set Delays:
   • Stagger the animations by applying a delay to each image:
     • Image 1: No delay.
     • Image 2: 0.2s delay.
     • Image 3: 0.4s delay, and so on.
7. Hover Out Animation:
   • Add a Hover Out animation to reverse the process:
     • Set opacity back to 0% and reset the images to their initial positions.

---

Step 4: Refine the Animation

1. Adjust Easing:
   • Use an easing curve like Ease-In-Out for smoother transitions.
2. Timing:
   • Experiment with animation durations (e.g., 0.3s to 0.6s per image) to get the desired effect.
3. Preview the Effect:
   • Click the Preview button to test the hover interaction.

---

Step 5: Optional Enhancements

1. Add Shadows or Borders:
   • Apply subtle box shadows or borders to the images for added depth.
2. Include a Trigger Element:
   • Instead of hovering over the image stack itself, you can add a button or overlay as the hover trigger.
3. Responsive Design:
   • Ensure the effect works well on different screen sizes:
     • Adjust image sizes, spacing, and stack offsets for mobile or tablet views.

---

Step 6: Publish and Test

1. Save Your Work:
   • Regularly save your project to avoid losing progress.
2. Publish the Site:
   • Click the Publish button to make your animation live.
3. Test Interactivity:
   • Test the hover effect on different devices and browsers to ensure it works seamlessly.

---

Conclusion

With this step-by-step guide, you can create a stunning image stack reveal effect on hover in Webflow. This interaction adds a professional touch to your website and is particularly effective for showcasing projects, products, or portfolios. Experiment with different animation speeds, styles, and stack designs to create a unique user experience!