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