$\"BoldGrid$ <\/div>\n<\/li>\n<\/ul>\n

Step 3 – Add Content to the Hover Box<\/strong>
\nThis step is the same for all themes. You can add almost any type of content to a hover box. Due to the dynamic nature of sliders and hover boxes we do not recommend mixing them.<\/strong> It’s important to remember users may miss content only shown on hover if they do not interact with the area. For this reason, try not to put any critical information in a hover box.<\/p>\n

\n
Click in the hover box are and add your desired content<\/li>\n

Click on your content and use the orange popover to click Advanced Control
\n $\"hover$ <\/a><\/strong><\/li>\n
Near the bottom click the option for Hover Visibility
\n<\/strong> $\"Hover$ <\/a><\/li>\n
Choose which background this element will show with\n
\n
Always Show = both Standard and Hover Backgrounds<\/li>\n
Show Only on Hover = Hover Background<\/li>\n
Hide Only on Hover = Standard Background<\/li>\n<\/ul>\n<\/li>\n
Repeat for each element in the hover box<\/li>\n<\/ul>\n
Create a Hover Box in Other Themes<\/h3>\n
Hover boxes work best with our WordPress theme<\/a> Crio. If you are using another theme and the hover effects do not work as expected after following these instructions, please leave a comment below.<\/p>\n
Step 1 – Set the Standard Background<\/strong><\/p>\n
\n
Click in the area where you want to create a hover box and choose Change Background<\/strong>
\n $\"Change$ <\/a><\/li>\n
Click Add Media<\/strong> to upload an image or choose from the Media Library
\n $\"Hover$ <\/a><\/li>\n
You can also click Color<\/strong> or Pattern <\/strong>if you do not want to use an image for the Standard Background
\n $\"Hover$ <\/a><\/li>\n<\/ul>\n
Step 2 – Set the Hover Background<\/strong><\/p>\n
Setting a background to use on hover is what activates the area as a hover box in the Post and Page Builder.<\/p>\n
\n
From the Background panel, click Hover Effects<\/strong><\/li>\n
Chose a Hover Color<\/strong> or Hover Background Image<\/strong>
\n<\/strong> $\"Hover$ <\/a><\/li>\n
Use the Mobile Visibility<\/strong> control to set which background shows on a device that can’t hover, like a phone
\n $\"Hover$ <\/a><\/li>\n<\/ul>\n
Step 3 – Add Content to the Hover Box<\/strong>
\nAdding hover box content to other themes follows the same steps as adding content to a hover box in Crio.<\/a><\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
The Post and Page Builder allows you to create dynamic content by using hover boxes. With hover boxes, a unique set of content shows when a user moves their mouse over the area. In this article you will learn how to create hover boxes in WordPress. How to Create Hover Boxes in WordPress Hover boxes […]<\/p>\n","protected":false},"author":215,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"Working with Hover Boxes | BoldGrid","bgseo_description":"In this article you will learn how to create hover boxes in WordPress. With hover boxes, unique content shows when a user moves their mouse over the area. ","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[148],"tags":[],"class_list":["post-47776","post","type-post","status-publish","format-standard","hentry","category-page-builder"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47776","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/215"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=47776"}],"version-history":[{"count":21,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47776\/revisions"}],"predecessor-version":[{"id":104700,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/47776\/revisions\/104700"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=47776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=47776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=47776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}