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

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.
• Advanced Border Radius: Apply custom radius values for Elementor iHover widget image. Get the radius value from here.
• Border Radius: Insert border radius values.
• 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.

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.

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.

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 %.

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 %.

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 %.

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 %.

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 %.