--- title: Hover Box description: "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…" url: "https://shapekode.com/product/shapeblock/docs/hover-box/" updated: "2026-10-15" category: Content Block --- # Hover Box 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. ![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-38.png) ### 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. ![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-39.png) ## 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. ![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-40.png) ## 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. ![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-41.png) ## 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.