Hover Box Widget Tutorial

Intro

Premium Hover Box Widget allows you to add an eye-catching call to actions or display various types of website content like services or products right on your webpage. This Elementor Widget designed with the attention-grabbing 3D effect.

In this tutorial, we will discuss Elementor Hover Box Widget options in detail.

Click here to check Premium Hover Box Widget demo.

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.
Premium Hover Box Widget for Elementor
Premium Hover Box Widget for Elementor

Key features

  • Front
  • Back
  • Additional settings

1. Front

Select between editing the content and the background.

Content
  • Icon: Enable or disable adding an icon that is shown on the front side at the top of the widget, above the title and description.
    • Icon Type: Select or upload a custom image via the Media Library, or select from a list of Font Awesome Icons.
    • Icon Size: Adjust the icon size in pixels, em or %. The default size is 40 pixels.
  • Title: Enable or disable a title.
    • Title: Add the title text for the front side.
    • 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. The default is H3.
  • Description: Enable or disable the description. When enabled, the description is shown at the bottom of the front side below the icon and the title.
    • You can add your description directly in the Richtext editor as you can edit the text visually or with code and you can add images from the Media Library.
  • Vertical Position: Select the position of the icon, title and description inside the widget’s container. Choose from top, middle and bottom. You can preview the setting directly in the editor.
  • Content Alignment: You can justify the content or align it to the left, center or right.
Screenshot Displays The Available Settings for Premium Hover Box Front Face Content
Front Side Settings in Elementor’s Hover Box Widget

The background settings affect the background behind the content on the front side.

Background Type

  • Color or Gradient Colors
  • Image: Select or upload an image via the Media Library. If an image is selected, the following options become available:
    • Position:
      • Default
      • Top Left
      • Top Center
      • Top Right
      • Center Left
      • Center Center
      • Center Right
      • Bottom Left
      • Bottom Center
      • Bottom Right
      • Custom: Adjust the image’s X and Y positions using pixels, em % or VW.
    • Attachment: Default, Scroll or Fixed.
    • Repeat:
      • Default
      • No-repeat
      • Repeat
      • Repeat-x
      • Repeat-y
    • Size:
      • Default
      • Auto
      • Cover
      • Contain
      • Custom: Adjust the image width using pixels, em % or VW.
  • Overlay Color: Add an overlay color to cover the background image.
Screenshot Shows The Available Background Options in Elementor Hover Box Front Face
The Available Background Settings in Hover Box Widget’s Front Face

2. Back

The backside of the Premium Hover Box Widget has the same options as the front, but with an addition of an optional link button.

  • Icon: Enable or disable an icon.
    • Icon Type: Select or upload a custom image via the Media Library, or select from a list of Font Awesome Icons.
    • Icon Size: Adjust the icon size in pixels, em or %. The default is 40 pixels.
  • Title: Add a title to the back face of the Hover Box widget.
    • HTML Tag: Select a tag that will be used to display the title.
  • Description: Enable or disable the description and add the content in the Richtext editor.
  • Link: Enable or disable adding a button link to the backside of the hover box. If enabled, the following options will be available:
    • Apply on: Select whether if you want the link to be applied on the button only, or on the whole box.
    • Link Type: Select from a list of existing pages, or enter a custom URL.
  • Vertical position: Select the position of the content inside the widget’s container. Choose from top, middle and bottom.
  • Content Alignment: You can justify the content or align it to the left, center or right.
Screenshot Displays The Available Settings for Hover Box Back Face Content
Back Face Settings in Premium Hover Box Widget for Elementor
Screenshots, [Left] Shows Elementor Hover Box Widget Content Settings, [Right] Text Says "Overlay Color" with Car Image on The Background
Elementor Hover Box Widget, Content Settings for Hover Box Front Face
Screenshots, [Left] Displays Elementor Hover Box Widget Background Settings, [Right] Result Silver Car "Honda" With Semi Transparent Overlay Color
Elementor Hover Box Widget Front Face Background Settings
Screenshots [Left] Shows Background Image and Blue Overlay, [Right] Elementor Hover Box Background Image of a Girl Wearing Sunglasses and Summer Outfit
Available Background Options for Front Face of Elementor Hover Box
Screenshots Display Available Styling Options for Content Positioning and Alignment of Elementor Hover Box Content
Front and Back Sides of the Elementor Hover Box Widget Clarifies The Content Positioning and Alignment
  • Background Type: Choose whether if you want to upload/select an image from the Media Library, or you can add a color/gradient colors.
  • Overlay Color: Select an overlay color.
The Available Settings for Hover Box Back Face Shows The Background Options
Available Settings for The Back Side of Elementor Hover Box Widget

3. Additional settings

  • Effect: Select a Hover effect for the Hover Box. Choose from the available effects:
    • Fade
    • Flip
    • Slide
    • Push
    • Zoom
    • Faded Zoom In
    • Faded Zoom Out
  • Flip Direction (Appear If the Effect selected is Flip, Slide, and Push): Select the flip direction. Choose between the following:
    • Right to left
    • Left to Right
    • Top to Bottom
    • Bottom to Top
  • Hover Text Animation: Enable/Disable Hover Text Animation allows you to make Text animated when the box is flipped ( It works only with the Flip effect).
  • Height: Adjust the container’s height.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the box:
    • None (Default)
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
Screenshot Display The Available Additional Settings for Elementor Hover Box Widget
Elementor Hover Box Widget Additional Settings [Effect, Flip Direction, Hover Text Animation, Height, Border Type, and Border Radius]
Screenshots [Left] Shows Additional Settings in Elementor Hover Box, [Right] Front and Back Hover Box Sides Showing a Boat in The Sea With Greenish Overlay Color
Displaying The Front and Back Face of Elementor Hover Box Widget
Screenshots [Left] Displays Additional Settings in Elementor Hover Box, [Right] Girl Wearing Sunglasses, and Overlay with Icon of "Square Academic Cap"
Elementor Hover Box Additional Settings

Style

  • Front
  • Back
  • Link

1. Front & Back

The style options are identical for the front and back.

Adjust the style settings for the icon, title, and description respectively:

  • Box Shadow: Add a shadow around the container by controlling the following settings:
    • Horizontal Position
    • Vertical Position
    • Blur
    • Spread
    • Position:
      • Outline
      • Inset
Icon
  • Color: Select a color for the icon.
  • Background Color: Select a background color 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 box:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the area with the background behind the text. You can adjust the border-radius in pixels, % or em.
  • Shadow: Add a shadow behind the icon using the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Margin: Adjust the margin in pixels, em or %
  • Padding: Adjust the padding in pixels, em or %.
Title and Description

The options for the title and description are identical.

  • Text Color: Select a text color for the title.
  • In the Typography settings you can:
    • Select from a large number of font families.
    • Select the font size in either pixel, em, rem or vw.
    • Select the font-weight: From 100 (Thin) to 900 (Very Thick), or you can keep it 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, or None.
    • Adjust the line-height.
    • Adjust the letter spacing.
  • Text Shadow: Add a shadow behind the text by selecting from the following options:
    • Color
    • Horizontal position
    • Vertical position
    • Blur
  • Background Color: Select a background color behind the text.
  • Margin: Adjust the margin in pixels, em or %.
  • Padding: Adjust the padding in pixels, em or %.
Screenshots for Elementor Hover Box Styling Settings That Includes Icon and Title
The Available Styling Options for Elementor Hover Box Widget [Icon and Title]
2. Link
  • Typography.
    • Select the styles for the normal and hover states.
    • Text Color: Select a text color for the link.
    • Text Shadow: Add a shadow behind the button text. Select from the following options:
      • Color
      • Horizontal position
      • Vertical position
      • Blur
  • Background color: Select a background color for the button.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the button:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border Radius: Increasing the border-radius will add circular corners to the button. You can adjust the border-radius in pixels, % or em.
  • Margin: Margin is the space between the button and the rest of the content. Adjust the margin in pixels, em or %.
  • Padding: Padding is the space between the link text and the edge of the button. Increasing the padding will increase the button size. Adjust the padding in pixels, em or %.
Screenshot Displays Available Settings for Elementor Hover Box Back Side Link Styling Options
Elementor Hover Box Back Side Link Styling Options
Screenshots [Left] Displays Styling Settings for Elementor Hover Box Back Link, [Right] Shows Elementor Hover Box Link
Elementor Hover Box Widget, Hover Box Back Link Normal Styling, with Example “Purchase Now”
Screenshots [Left] Displays Styling Settings for Elementor Hover Box Back Link on Hover, [Right] Shows 
Elementor Hover Box Button Link White Background Green
Elementor Hover Box Back Link Hover Styling, with Example “Purchase Now”

Download Now it's free!

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