{"id":2047,"date":"2026-10-14T04:32:59","date_gmt":"2026-10-14T04:32:59","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&p=2047"},"modified":"2026-10-15T06:31:19","modified_gmt":"2026-10-15T06:31:19","password":"","slug":"hover-box","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/hover-box\/","title":{"rendered":"Hover Box"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

How to Add a Hover Box Block<\/h2>\n\n\n\n

Follow these steps to add and configure the Hover Box Block in the Gutenberg editor.<\/p>\n\n\n\n

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

    Step 2: Configure the Hover Box<\/h3>\n\n\n\n

    Select the Hover Box Block to access its settings in the block inspector. The available tabs are:<\/p>\n\n\n\n

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

      Settings Tab<\/h2>\n\n\n\n

      The Settings tab contains three panels: Content, Hover, and Link.<\/p>\n\n\n\n

      1. Content<\/h3>\n\n\n\n

      Use this panel to choose the media and enter the content displayed inside the Hover Box.<\/p>\n\n\n\n

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

          2. Hover<\/h3>\n\n\n\n

          Use this panel to configure the hover animation and its speed.<\/p>\n\n\n\n

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

                3. Link<\/h3>\n\n\n\n

                Use this panel to make the Hover Box clickable.<\/p>\n\n\n\n

                  \n
                • URL:<\/strong> Enter the destination URL for the Hover Box.<\/li>\n\n\n\n
                • Open in a new tab:<\/strong> Enable this option to open the link in a new browser tab.<\/li>\n<\/ul>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n

                  Layout Tab<\/h2>\n\n\n\n

                  The Layout tab contains the Box Size panel, where you can adjust the alignment, size, and spacing of the Hover Box.<\/p>\n\n\n\n

                  1. Box Size<\/h3>\n\n\n\n

                  Use this panel to control the position and dimensions of the Hover Box.<\/p>\n\n\n\n

                    \n
                  • Alignment:<\/strong> Choose the horizontal alignment of the box.\n
                      \n
                    • Left<\/li>\n\n\n\n
                    • Center<\/li>\n\n\n\n
                    • Right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                    • Size (px):<\/strong> Set the box size in pixels. Responsive values can be configured for desktop, tablet, and mobile.<\/li>\n\n\n\n
                    • Margin:<\/strong> Adjust the space around the block. Responsive values can be configured for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n
                      \"\"<\/figure>\n\n\n\n

                      Style Tab<\/h2>\n\n\n\n

                      The Style tab contains five panels to customize the appearance of the box and its content.<\/p>\n\n\n\n

                      1. Box<\/h3>\n\n\n\n

                      Use this panel to customize the shape and appearance of the Hover Box.<\/p>\n\n\n\n

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

                          2. Overlay<\/h3>\n\n\n\n

                          Use this panel to customize the overlay displayed over the box during the hover effect.<\/p>\n\n\n\n

                            \n
                          • Background:<\/strong> Set the overlay background color or gradient.<\/li>\n\n\n\n
                          • Padding:<\/strong> Adjust the space inside the overlay content. Responsive values can be configured for desktop, tablet, and mobile.<\/li>\n<\/ul>\n\n\n\n

                            3. Icon<\/h3>\n\n\n\n

                            Use this panel to customize the icon’s appearance. These settings apply when Icon is selected as the media type.<\/p>\n\n\n\n

                              \n
                            • Size (px):<\/strong> Set the icon size in pixels. Responsive values can be configured for desktop, tablet, and mobile.<\/li>\n\n\n\n
                            • Color:<\/strong> Set the icon color.<\/li>\n<\/ul>\n\n\n\n

                              4. Title<\/h3>\n\n\n\n

                              Use this panel to customize the title’s appearance.<\/p>\n\n\n\n

                                \n
                              • Color:<\/strong> Set the title text color.<\/li>\n\n\n\n
                              • Typography:<\/strong> Customize the title typography.<\/li>\n<\/ul>\n\n\n\n

                                5. Description<\/h3>\n\n\n\n

                                Use this panel to customize the description’s appearance.<\/p>\n\n\n\n

                                  \n
                                • Color:<\/strong> Set the description text color.<\/li>\n\n\n\n
                                • Typography:<\/strong> Customize the description typography.<\/li>\n<\/ul>\n\n\n\n
                                  \"\"<\/figure>\n\n\n\n

                                  Advanced Tab<\/h2>\n\n\n\n

                                  The Advanced tab provides additional spacing and background controls for the Hover Box Block. These settings apply to the entire block.<\/p>\n\n\n\n

                                  1. Spacing<\/h3>\n\n\n\n
                                    \n
                                  • Padding:<\/strong> Set the inner spacing around the entire Hover Box Block. Configure the top, right, bottom, and left values separately.<\/li>\n\n\n\n
                                  • Margin:<\/strong> Set the outer spacing around the entire Hover Box Block. Configure the top, right, bottom, and left values separately.<\/li>\n<\/ul>\n\n\n\n

                                    Both controls support responsive settings for desktop, tablet, and mobile devices.<\/p>\n\n\n\n

                                    Note:<\/strong> 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.<\/p>\n\n\n\n

                                    2. Background<\/h3>\n\n\n\n
                                      \n
                                    • Background:<\/strong> Customize the background of the entire Hover Box Block using a background color or gradient.<\/li>\n<\/ul>\n\n\n\n

                                      Note:<\/strong> This background applies to the entire block area.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                      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. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[16],"doc_tag":[],"class_list":["post-2047","docs","type-docs","status-publish","hentry","doc_category-content-block"],"year_month":"2026-10","word_count":827,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Content Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/content-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2047"}],"version-history":[{"count":0,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2047\/revisions"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2047"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2047"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}