In this guide, we will show you how to add an “Icon Hover Effects widget” to your Elementor website. The Icon Hover Effects widget makes it easy to enhance your icons with unique and stylish hover animations, adding dynamic visual interest and encouraging user interaction. Perfect for highlighting important elements and making your site stand out, this free widget allows you to seamlessly match your icon styles to your website’s overall design without custom code.
Let’s explore the customization options available in the “Icon Hover Effects widget” for Elementor below.
Elementor Free Icon Hover Effects Tutorial Video
Add a Free Icon Hover Effects to Elementor
Add a Free Icon Hover Effects Widget to an Elementor Page
Elementor Icon Hover Effects Widget General Settings
Styles
Choose from pre-defined hover effect styles to apply to the icon:
Outer Border
Inside Border
Pulse
Dashed
Slide
Rotate
Double Border
Double Border Rotate
Pulse Shadow
Sleek
Sleek 2
Slide Left
Slide Up
Slide Down
Alignment
Set the horizontal alignment of the icon within its container:
Center
Left
Right
Icon
Select the icon you want to display.
Link
Enter the URL that the icon should link to. Click the gear icon to configure additional link options.
Elementor Icon Hover Effects Widget Style Settings
Icon Size
Set the size of the icon.
Circle Size
Adjust the size of the circular background surrounding the icon.
Background Color
Choose the background color for the icon container in its normal state.
Background Color Hover
Choose the background color for the icon container when hovered.
Icon Color
Set the color of the icon in its normal state.
Icon Color Hover
Set the color of the icon on hover.
Border Color
Choose the border color of the icon container in its normal state.
Border Color Hover
Choose the border color of the icon container on hover.
Icon Hover Effects Widget Design Examples For Elementor
Here are some live use cases for the Icon Hover Effects widget.
Icon Hover Effects with Product.
Get Connected Buttons with Icon Hover Effects.
Thank you for using the Icon Hover Effects widget for Elementor! This powerful tool enhances your icons with unique and stylish hover animations, making it easy to add flair and dynamic visual interest to your website. With a variety of built-in hover styles, it helps guide user interaction and draw attention to important areas, all while fitting seamlessly into your site’s style, and it’s free. For questions or inspiration, feel free to reach out or explore our demo.
