How to Apply Image Hover Effects in Accordions

Add interactive animations to your image accordions, creating a dynamic experience when the user hovers over them. By enabling and adding a layer of dynamic effects, you can showcase images elegantly and increase user engagement in your image-heavy accordion layouts.

To Add Image Hover Effects:

  1. Insert any Accordion Blocks (e.g., “Image Accordion“) block to your page.
  2. Go to the Image panel, “Hover Effects” in the block settings.
  3. Select an effect from the list (e.g., Zoom In, Grayscale, or Blur).
  4. Adjust the animation speed for a smooth transition.

To know how to configure, please visit the detailed documentation.

Let’s watch the Live Demo of how the Image Hover Effects work in Accordions.

Updated on April 15, 2026