In this guide, we will show you how to add an “iHover Effects widget” to your Elementor website. The iHover Effects widget is a super pack of stylish hover effects that lets you transform any image with engaging visual animations, along with titles and descriptions for enhanced user interaction. Perfect for making your design more interactive and visually appealing, this free widget allows you to seamlessly match your site’s style without complex code.
Let’s explore the customization options available in the “iHover Effects widget” for Elementor below.
Add a Free iHover Effects to Elementor
Add a Free iHover Effects Widget to an Elementor Page
Elementor iHover Effects Widget General Settings
Styles
Choose a pre-defined hover effect style:
Fade Out Right
Fade Out Bottom
Fade Out Top
Zoom Out Left
Zoom Out Right
Zoom Out Top
Zoom Out Bottom
Roll Out Fade In content Left
Roll Out Fade In content Right
Roll Out Fade In content Top
Roll Out Fade In content Bottom
Image Small on Top
Image Small on Bottom
Flip Left
Flip Right
Flip Top
Flip Bottom
Roll Out-In Left
Roll Out-In Right
Roll Out-In Top
Roll Out-In Bottom
Content From Left and Right
Content From Top
Content From Bottom
Flip and Hide Left
Flip and Hide Right
Flip and Hide Top
Flip and Hide Bottom
Spin Out-In
Open Left to Right
Open Right to Left
Zoom In Content
Flip to Reveal Top
Flip to Reveal Right
Flip to Reveal Left
Flip to Reveal Bottom
Content Zoom In
Rotate 3D Top to Bottom
Rotate 3D Bottom to Top
Spinner Color 1
Set the first color for the spinner animation (if supported by the selected style).
Spinner Color 2
Set the second color for the spinner animation (if supported by the selected style).
Title
Enter the title text for the iHover element.
Description
Enter the description text for the iHover element.
Image
Select or upload a background image for the iHover element.
Link
Enter the URL for the iHover element. Click the gear icon to configure link options.
Elementor iHover Effects Widget Style Settings
Alignment
Set the horizontal alignment of the iHover content:
Left
Center
Right
Size (px)
Define the overall size of the iHover element in pixels.
Info Background
Choose the background color for the information area (title and description) when hovered.
Border Width
Set the width of the iHover element’s border.
Title Typography
Click the pencil icon to adjust the font family, size, weight, and other text styles for the title.
Title Color
Set the normal color of the title.
Title Color Hover
Set the title color on hover.
Text Typography
Click the pencil icon to adjust the font family, size, weight, and other text styles for the description text.
Text Color
Set the normal color of the description text.
Text Color Hover
Set the color of the description text on hover.
iHover Effects Widget Design Examples For Elementor
Here are some live use cases for the iHover Effects widget.
iHover Effects with Product Icons.
iHover Effects with Food Order.
Thank you for using the iHover Effects widget for Elementor! This powerful tool is a super pack of stylish hover effects that lets you transform any image with engaging visual animations, titles, and descriptions to enhance user interaction. With a variety of built-in effects and seamless integration, it makes your website more interactive and visually appealing, all for free. For questions or inspiration, feel free to reach out or explore our demo.