< All Topics

Using the Hover Card widget, you can add some unique hover elements to your layouts. These are simple as well as complex hover styles which you can add very easily without coding them from ground up. The widget is compatible with Elementor Pro Dynamic Fields and The Plus Addons Custom Loop Options.

Pro tip
Why not create your own hover designs using this widget. Showcase your content beautifully on your hover designs with ease. Make sure to make proper use of the Hover Card widget to Enhance UX. You need some CSS and coding knowledge to use this widget properly.

How to use the Hover Card widget of The Plus Addons For Elementor

The Hover Card widget comes with multiple functions. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Hover Card Widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Hover Card

Select the Layout in Flipbox widget.

Content [ Start Tag — End Tag ]

Open:

Open Tag

Select which font size you want to use for Open Tag.

Enter Class

Enter which class you want to use for the Open tag.

Close:

Close Tag

Select which font size you want to use for Close Tag.

Content

Select what type of content you want to use the Hover Card. You will get options like Text, Image, HTML, Style, Script.

Select content for the hover card widget

Style

Position

Select the position of the hover card here. You can either set it to Relative or Absolute.

Display

Select the display style for the hover card widget. You will get the following options:
Block
Inline Block
Flex
Inline Flex
Initial
Inherit

Alignment CSS Options

Slide to enable Alignment CSS options.

Text Align

Set the Text Alignment here.

Margin

Set the Margin here.

Padding

Set the Padding here.

Width/Height Options

Slide to enable the width/height options here. And set the width and height here.

Z-Index

Set the Z-Index here.

Overflow

Select if you want let overflow stay visible or hide it.

Visibility

Set the visibility of the hover card here.

Background

Slide to enable Background for the Hover Card widget.

Normal:

Background Type

Set the Background type here, either classic or gradient.

Border Type

Slide to enable Background for the Hover Card widget.

Border Radius

Set the Border radius style here. You will get multiple options like solid, dotted, double, dashed, groove.

Box Shadow

Set the Box shadow here.

Transition CSS

Enter the Transition CSS here.

Transform CSS

Enter the Transform CSS here.

CSS Filters

Set the CSS filter setting here.

Opacity

Set the Opacity for the Hover Card widget.

Hover:

Custom Hover

Slide to enable Custom hover for the Hover Card widget.

Background Type

Set the Background type here, either classic or gradient.

Border Type

Set the Border radius style here. You will get multiple options like solid, dotted, double, dashed, groove.

Border Radius

Slide to enable Background for the Hover Card widget.

Box Shadow

Set the Box shadow here.

Transition CSS

Enter the Transition CSS here.

Transform CSS

Enter the Transform CSS here.

CSS Filters

Set the CSS filter setting here.

Opacity

Set the Opacity for the Hover Card widget.

2. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0.5 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Need help?