Premium iHover Widget

Intro

Elementor iHover widget allows you to create interactive image based banners, blurbs and call to actions. The widget includes an image, heading, icon and description, with a large number of impressive interactive hover effects as well as color options.

You can take a look on the animation effects from here.

Elementor iHover Widget

Elementor iHover Widget
Elementor iHover Widget

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

  • Image
  • Content

1. Image

  • Choose Image: Upload or select an image from the WordPress Media Library.
  • Size: Adjust the image size in pixels, em or %.
  • Border Radius: Set the border radius for iHover widget container.
  • Hover Effect: Select one of the following hover effects. You can preview the effect in the editor before applying the effect.
    • Advertising: The overlay color and the content will expand from the middle and out to the edges of the image.
    • Book Cover: The image is flipped to the left, revealing the content.
    • Backward: The image is turned around and the content slides in from the right to eventually cover the image.
    • Faded In Background: The image fades and the content and overlay color is shown.
    • Flash Rotation: The image spins around fast and is reduced in size, then the content is shown.
    • Flip Background: The content and overlay color flips over the image.
    • Flip Door: The image flips away and is no longer visible.
    • Heroes Flying-Top: The image is reduced in size and flys out upwards, and the content is shown.
    • Heroes Flying-Bottom: The image is reduced in size and flys out downwards, and the content is shown.
    • Heroes Flying-Right: The image is reduced in size and flys out to the right, and the content is shown.
    • Reduced Image-Top: The image is reduced in size and moves upwards, still visible and the content is shown.
    • Reduced Image-Right: The image is reduced in size and moves to the right, still visible, and the content is shown.
    • Reduced Image-Bottom: The image is reduced in size and moves to the bottom, still visible, and the content is shown.
    • Rotated Image-Left: The image flips and rotates to the left and the content is shown.
    • Rotated Image-Right: The image flips and rotates to the right and the content is shown.
    • Rotated Wheel Image-Left: The image spins and moves to the left before it fades out, and the content is shown.
    • Rotating Wheel-Left: The image spins and moves to the left before it fades out, and the content is shown.
    • Rotating Wheel-Top: The image spins and moves upwards before it fades out, and the content is shown.
    • Rotating Wheel-Bottom: The image spins and moves downwards before it fades out, and the content is shown.
    • Rotating Wheel-Right: The image spins and moves to the right before it fades out, and the content is shown.
    • Rotor Cube: The image flips and turns downwards and the content flips down from the top.
    • Slided Out Image: The image slides out to the left and fades, and the content is shown.
    • Slided In Image: The content slides in from the right, and the image is reduced in size and fades.
    • Spinner: Adds a border to the image that indicates how the image turns around slowly until the content is shown.
    • Zoom In: The image is enlarged and zoomed in and then fades, and the content is shown.
    • Zoom Out: The image is reduced in size and zoomed out and then fades, and the content is shown.
  • Link: Enable or disable a link. When enabled, you can choose to link to an existing page, or enter a custom URL.
  • Link Title: Add a link title.
  • Alignment: Align the image to the left, center or right.
  • CSS Classes: Add extra CSS classes to the image, which you can then use for more advanced styling.
Elementor iHover Widget Image Settings
Elementor iHover Widget Image Settings

2. Content

  • Icon: Enable or disable an icon. The icon will be visible above the title.
  • Icon Type: You can select or upload an image from the Media Library, or use Font Awesome icons.
  • Icon Size: Adjust the icon size in pixels, em or %. The default is 30 pixels.
  • Title: Enable or disable the title text.
    • Text: Add a title text.
    • HTML Tag: Select the tag which will be used to display the title. Choose from H1 to H6, where H1 is the largest and H6 is the smallest. Default is H4.
  • Separator: Enable or disable a separator between the title and the description.
  • Description: Enable or disable the description.
    • Text: You can add the content in the Richtext editor. You can edit the text visually or with code, and add images from the Media Library.
  • Alignment: Align the text to the left, center or right.
iHover Widget For Elementor Content Settings
iHover Widget For Elementor Content Settings

Style

  • Front Image
  • Icon
  • Title
  • Separator
  • Description
  • Container

1. Front Image

  • CSS filters: You can customize the image by selecting one of the available filters: Blur, Brightness, Contrast, Saturation and Hue.
  • Blend Mode: Set how the image should blend with the container background.
Elementor iHover Widget Front Image Style
Elementor iHover Widget Front Image Style

2. Icon

  • Color: Select a color for the icon.
  • Background Color: Select a background color for the area behind the icon.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the widget:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius: Increasing the border radius will add circular corners to the container. You can adjust the border radius in pixels, % or em.
  • Shadow: Add a shadow behind the icon. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Margin: Margin is the space between the icon and the rest of the content. Adjust the margins in pixels, em or %.
  • Padding: Padding is the space between the icon and the edge of the icon container. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
Elementor iHover Widget Front Icon Style
Elementor iHover Widget Icon Style

3. Title

  • Text color: Select a color for the Title text.
  • Typography:
    • Select from a large number of font families.
    • Select the font size in either pixels, em, rem or vw.
    • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic or oblique.
    • Select a text decoration: Default, underline, overline, line through, none.
    • Adjust the line height.
    • Adjust the letter spacing.
  • Text Shadow: Add a shadow behind the text. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Margin: Margin is the space between the title and the rest of the content. Adjust the margins in pixels, em or %.
  • Padding: Padding is the space between the title and its block container. Adjust the padding in pixels, em or %.
Elementor iHover Widget Title Style
Elementor iHover Widget Title Style

4. Separator

  • Color: Select a color for the separator.
  • Style: Select between a solid, double or dotted line.
  • Width: Adjust the width of the separator line in pixels, em or %. Default is 100%.
  • Height: Adjust the width of the separator line in pixels or em.
  • Box Shadow: Add a shadow around the separator. Select the color and the following settings:
    • Horizontal position
    • Vertical position
    • Blur
    • Spread
    • Position: Outline or Inset
  • Margin: Margin is the space between the separator and the rest of the content. Adjust the margins in pixels, em or %.
iHover Elementor Widget Separator Style
Elementor iHover Widget Separator Style

5. Description

  • Text Color: Select a color for the description.
  • Typography:
    • Select from a large number of font families.
    • Select the font size in either pixels, em, rem or vw.
    • Select the font weight: From 100 (thin) to 900 (very thick), default, normal or bold.
    • Transform the text to: Uppercase, lowercase, capitalized, default or normal.
    • Select a font style: Normal, italic or oblique.
    • Select a text decoration: Default, underline, overline, line through, none.
    • Adjust the line height.
    • Adjust the letter spacing.
  • Text Shadow: Add a shadow behind the title text. Select from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Margin: Margin is the space between the description and the rest of the content. Adjust the margins in pixels, em or %.
  • Padding: Padding is the space between the description and it’s block container. Adjust the padding in pixels, em or %.
Premium iHover Widget For Elementor Description Style Settings
Premium iHover Widget For Elementor Description Style Settings

6. Container

  • Hover Overlay color: The overlay color is the color that is shown when the user hovers over the image. You can select the color and the opacity.
  • Background color: The background color can be used for example with transparent images, or when additional padding is added to the container. You can select the color and the opacity.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the widget:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius: By adjusting this value, you can change the container from a circle to a square. Decreasing the border-radius will remove the circular corners of the container. You can adjust the border-radius in pixels, % or em.
  • Margin: Margin is the space between the container and the rest of the post or page content. Adjust the margins in pixels, em or %.
  • Padding: Padding is the space between the content and the container edge. Increasing the padding will make the background larger. Adjust the padding in pixels, em or %.
iHover Elementor Widget Container Style
iHover Elementor Widget Container Style

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.