In this guide, we will show you how to add a “Rollover Image Effect widget” to your Elementor website. The Rollover Image Effect widget makes it easy to create engaging image transitions by swapping one image with another on hover, enhancing user interaction and visual appeal. Perfect for adding dynamic effects without complex code or additional animation plugins, this free widget allows you to create smooth transitions that match your site’s style seamlessly.
Let’s explore the customization options available in the “Rollover Image Effect widget” for Elementor below.
Add a Free Rollover Image Effect to Elementor
Add a Free Rollover Image Effect Widget to an Elementor Page
Elementor Rollover Image Effect Widget General Settings
Image One
Upload or select the initial image.
Image One Size
Choose the resolution for Image One:
Full
Large (max width 1024)
Medium Large (max width 768) (Selected)
Medium (max width 300)
Thumbnail (150x150)
1536x1536 (max width 1536)
2048x2048 (max width 2048)
Betterdocs-category-thumb (max width 360)
Woocommerce Thumbnail (300x300)
Woocommerce Single (max width 600)
Woocommerce Gallery Thumbnail (100x100)
Image Two
Upload or select the image for the hover state.
Image Two Size
Choose the resolution for Image Two:
Full
Large (max width 1024)
Medium Large (max width 768) (Selected)
Medium (max width 300)
Thumbnail (150x150)
1536x1536 (max width 1536)
2048x2048 (max width 2048)
Betterdocs-category-thumb (max width 360)
Woocommerce Thumbnail (300x300)
Woocommerce Single (max width 600)
Woocommerce Gallery Thumbnail (100x100)
Link
Enter the URL for the image. Click the gear icon for link options.
Transition Length (s)
Set the duration of the image transition on hover.
Content Title Field Name
Field used as a secondary heading or title within the tab content.
Content Field Name
Field used as the main body/content of each repeated item.
Image Field Name
Field used to display an image for each repeater item.
Button Text Field Name
Field that provides the text shown on a button in each item.
Button Link Field Name
Image One
Elementor Rollover Image Effect Widget Style Settings
Access
Select your Rollover Image Effect widget, then go to the Style tab.
Border Type
Choose a border style for the image container:
None
Solid
Double
Dotted
Dashed
Groove
Radius
Set the roundness of the image container's corners. Use the chain icon to link or unlink values.
Shadow
Click the pencil icon to configure shadow properties.
Size
Choose how the images inside the container adapt to its size:
Auto
Fixed Height
Ratio
Rollover Image Effect Widget Design Examples For Elementor
Here are some live use cases for the Rollover Image Effect widget.
Rollover Image Effect as a gallery
Rollover Image Effect in an e-commerce web.
Thank you for using the Rollover Image Effect widget for Elementor! This powerful tool lets you create engaging image transitions by swapping one image with another on hover, enhancing visual appeal and user interaction. With smooth effects, no complex code, and free availability, it integrates seamlessly with your site’s style. For questions or inspiration, feel free to reach out or explore our demo.