Get Started

Hover Box

3 min read

0:00 4:37

The ShapeBlock Hover Box Block lets you display an image or icon inside a circle or square. When visitors hover over the box, a title and description appear with a selectable hover effect.

How to Add a Hover Box Block

Follow these steps to add and configure the Hover Box Block in the Gutenberg editor.

Step 1: Add the Hover Box Block

  1. Open the page or post where you want to add the Hover Box Block.
  2. Click the + (Add Block) button in the Gutenberg editor.
  3. Search for Hover Box in the block search field.
  4. Select the Hover Box block from the ShapeBlock category.
  5. The Hover Box Block will be added to your page.
  6. Select the block to configure its content, hover effect, layout, and styling.

Step 2: Configure the Hover Box

Select the Hover Box Block to access its settings in the block inspector. The available tabs are:

  • Settings Tab: Choose an image or icon, enter the title and description, configure the hover effect, and set a link.
  • Layout Tab: Adjust the box alignment, size, and margin.
  • Style Tab: Customize the box shape, background, border, shadow, overlay, icon, title, and description.
  • Advanced Tab: Configure spacing and the block background.

Settings Tab

The Settings tab contains three panels: Content, Hover, and Link.

1. Content

Use this panel to choose the media and enter the content displayed inside the Hover Box.

  • Media: Choose the type of media to display.
    • Image
    • Icon
  • Image: Select, replace, or remove an image. This option appears when Image is selected as the media type.
  • Icon: Choose an icon from the icon picker. This option appears when Icon is selected as the media type.
  • Title: Enter the title displayed in the Hover Box.
  • Description: Enter the description displayed when visitors hover over the box.

2. Hover

Use this panel to configure the hover animation and its speed.

  • Effect: Choose the animation displayed when visitors hover over the box.
    • Fade
    • Slide
    • Push
    • Hinge
    • Shutter
    • Zoom
    • Flip
    • Spin
    • Blur
    • Grayscale
    • Circle Open
    • Curtain
  • Direction: Choose the direction of the effect when the selected animation supports it.
    • From Top
    • From Bottom
    • From Left
    • From Right
    • Zoom Up or Zoom Down for the Zoom effect
    • Horizontal or Vertical for the Flip effect
  • Speed (ms): Set the hover animation speed in milliseconds.

3. Link

Use this panel to make the Hover Box clickable.

  • URL: Enter the destination URL for the Hover Box.
  • Open in a new tab: Enable this option to open the link in a new browser tab.

Layout Tab

The Layout tab contains the Box Size panel, where you can adjust the alignment, size, and spacing of the Hover Box.

1. Box Size

Use this panel to control the position and dimensions of the Hover Box.

  • Alignment: Choose the horizontal alignment of the box.
    • Left
    • Center
    • Right
  • Size (px): Set the box size in pixels. Responsive values can be configured for desktop, tablet, and mobile.
  • Margin: Adjust the space around the block. Responsive values can be configured for desktop, tablet, and mobile.

Style Tab

The Style tab contains five panels to customize the appearance of the box and its content.

1. Box

Use this panel to customize the shape and appearance of the Hover Box.

  • Shape: Choose the shape of the box.
    • Circle
    • Square
  • Background: Set the box background color or gradient.
  • Border: Customize the box border, including its width, color, and style.
  • Border Radius: Adjust the corner radius when the Square shape is selected.
  • Box Shadow: Customize the shadow around the box.

2. Overlay

Use this panel to customize the overlay displayed over the box during the hover effect.

  • Background: Set the overlay background color or gradient.
  • Padding: Adjust the space inside the overlay content. Responsive values can be configured for desktop, tablet, and mobile.

3. Icon

Use this panel to customize the icon’s appearance. These settings apply when Icon is selected as the media type.

  • Size (px): Set the icon size in pixels. Responsive values can be configured for desktop, tablet, and mobile.
  • Color: Set the icon color.

4. Title

Use this panel to customize the title’s appearance.

  • Color: Set the title text color.
  • Typography: Customize the title typography.

5. Description

Use this panel to customize the description’s appearance.

  • Color: Set the description text color.
  • Typography: Customize the description typography.

Advanced Tab

The Advanced tab provides additional spacing and background controls for the Hover Box Block. These settings apply to the entire block.

1. Spacing

  • Padding: Set the inner spacing around the entire Hover Box Block. Configure the top, right, bottom, and left values separately.
  • Margin: Set the outer spacing around the entire Hover Box Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

Note: These spacing controls apply to the entire block and are separate from the item padding and list spacing options in the Layout and Style tabs.

2. Background

  • Background: Customize the background of the entire Hover Box Block using a background color or gradient.

Note: This background applies to the entire block area.

Updated on October 15, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.