Hover Card

Hover Card

Using the Hover Card block, 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 the ground up. The block is compatible with Gutenberg Pro Dynamic Fields and The Plus Addons Custom Loop Options.

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

How to use the Hover Card block of The Plus Addons For Gutenberg

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

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Hover Card into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Hover Card after “/” sign, eg.“/Hover Card”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Hover Card

Content [ Start Tag — End Tag ]

Open:

Open Tag

Select which HTML Tag you want to use for Open Tag.

Class Name

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.

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 block. 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 to 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 block.

Normal:

Background Type

Set the Background type here, either classic or gradient.

Border Type

Slide to enable Background for the Hover Card block.

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

Hover:

Custom Hover

Slide to enable Custom hover for the Hover Card block.

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

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

2. Advanced

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

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.