{"id":12353,"date":"2022-12-29T12:28:05","date_gmt":"2022-12-29T19:28:05","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=12353"},"modified":"2023-02-03T15:51:23","modified_gmt":"2023-02-03T22:51:23","slug":"divi-hover-options","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/","title":{"rendered":"Using Divi Hover Options"},"content":{"rendered":"<p>Divi Hover Options are available for pretty much any content or element you add to a page in Divi. You can add hover effects to text, icons, links, images and more within a module. Or you can add hover effects to entire modules, columns, rows, and\/or sections. This allows creativity to soar, enabling designers to create fun, interactive elements on their Divi websites. Customizing hover options is easy, and are accessible anywhere in the Visual Builder.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-tophoverex.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-tophoverex.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>In this doc, we&#8217;ll cover:<\/h2>\n<ul>\n<li><a href=\"#possible-hover-options\">What&#8217;s Possible with Hover Options<\/a><\/li>\n<li><a href=\"#accessing-hover-options\">Accessing Hover Options<\/a><\/li>\n<li><a href=\"#using-hover-options\">Using Hover Options<\/a><\/li>\n<li><a href=\"#element-specific\">Hover Options Are Element Specific<\/a><\/li>\n<li><a href=\"#best-practices\">Tips &#038; Best Best Practices for Using Hover Options<\/a><\/li>\n<li><a href=\"#example-hover-options\">Example Hover Effects<\/a><\/li>\n<li><a href=\"faq-hover-options\">FAQs<\/a><\/li>\n<li><a href=\"#more-resources\">Continue Learning<\/a><\/li>\n<\/ul>\n<h2 id=\"possible-hover-options\">What&#8217;s Possible With Hover Options in Divi<\/h2>\n<p>You can apply hover states to the content settings, design settings, and advanced settings of virtually any Divi design element (sections, rows, columns, and modules).<\/p>\n<h3>Changing Content on Hover<\/h3>\n<p>It&#8217;s possible to change your page content on hover (elements like text, images, buttons, blurs, and more). In the video below you&#8217;ll see an image change on hover and the text of the button on hover.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/change-content-example.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-content-ex.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3>Changing Design Styles on Hover<\/h3>\n<p>You&#8217;re also able to change design settings on hover like background colors, font styles, filters, transformations, and more. Check out the video below to see an example of what&#8217;s possible.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/hover-design-example_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hover-design-example.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"accessing-hover-options\">Accessing Divi Hover Options<\/h2>\n<p>Hover options are available in virtually all of Divi&#8217;s design elements! This includes sections, rows, columns, and modules. Hover options can be accessed in the same place you access regular customization options in the settings modal. This means that you can customize an elements background design for both the default desktop view and the hover state all in one place.<\/p>\n<h3>Hover Options Are Available On All Divi Elements<\/h3>\n<p>Hover options are available in all sections, rows, columns, and modules.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15041\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"897\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01-300x150.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01-1024x510.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01-768x383.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01-1536x765.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3>How To Access Hover Options<\/h3>\n<p>To access hover options, hover over the element you&#8217;re working on and <strong>click the gear icon<\/strong> to bring up that element&#8217;s settings.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15042\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"947\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps-300x158.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps-1024x539.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps-768x404.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoversteps-1536x808.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Then, navigate to the setting you would like to apply a hover effect on. Hover over it and click the hover icon.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12628\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps.png\" alt=\"divi hover options\" width=\"1800\" height=\"1263\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps-300x211.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps-1024x719.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps-768x539.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hoversteps-1536x1078.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Then, click on the hover icon tab. <strong>Note: <\/strong>If an option doesn\u2019t have the cursor icon available, it doesn\u2019t support hover option capabilities.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12629\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps.png\" alt=\"divi hover options\" width=\"1800\" height=\"1330\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps-300x222.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps-1024x757.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps-768x567.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hoversteps-1536x1135.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h4>Accessing Content Hover Options<\/h4>\n<p>In this example, let&#8217;s change the button text on hover so hat the button behaves like this on hover:<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>First, hover over the button module and click the gear icon to bring up the module settings.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12647\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1.png\" alt=\"button module changes\" width=\"2278\" height=\"1354\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1.png 2278w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1-300x178.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1-1024x609.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1-768x456.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1-1536x913.png 1536w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hoversteps-1-2048x1217.png 2048w\" sizes=\"auto, (max-width: 2278px) 100vw, 2278px\" \/><\/p>\n<p>Navigate to the Content tab and click into the Text settings group.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12650\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2.png\" alt=\"text settings changes\" width=\"1800\" height=\"1235\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2-300x206.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2-1024x703.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2-768x527.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hoversteps-2-1536x1054.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Hover over Text and click the hover icon to bring up the hover tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12651\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2.png\" alt=\"divi hover options\" width=\"1800\" height=\"1200\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2-300x200.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2-1024x683.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2-768x512.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/6-hoversteps-2-1536x1024.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Then click on the hover tab and enter the text you want displayed on hover.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12652\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2.png\" alt=\"text hover options\" width=\"1800\" height=\"1219\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2-300x203.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2-1024x693.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2-768x520.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/7-hoversteps-2-1536x1040.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h4>Accessing Design Hover Options<\/h4>\n<p>For this example, let&#8217;s change the button background color on hover.<\/p>\n<ol>\n<li>Click on the Design tab.<\/li>\n<li>Open up the Button settings groups<\/li>\n<li>Click on the hover icon and into the hover tab.<\/li>\n<li>Select the background color you want to display on hover.<\/li>\n<li>Click the green check button at the bottom of the module to save your changes.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12654\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps.png\" alt=\"save options\" width=\"1800\" height=\"1250\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps-300x208.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps-1024x711.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps-768x533.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/8-hoversteps-1536x1067.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h4>Accessing Advanced Hover Options<\/h4>\n<p>To add custom CSS on hover to the button module:<\/p>\n<ol>\n<li>Click on the Advanced tab.<\/li>\n<li>Click the CSS settings group.<\/li>\n<li>Hover over the box you want to put CSS in and click the hover icon and into the hover tab. Paste your CSS.<\/li>\n<li>Click the green check button to save your edits.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12655\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps.png\" alt=\"add CSS to module\" width=\"1800\" height=\"1106\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps-300x184.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps-1024x629.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps-768x472.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/9-hoversteps-1536x944.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h2 id=\"using-hover-options\">Using Hover Options In Divi (Examples)<\/h2>\n<p>While hover effects are available in all Divi elements, you&#8217;ll likely use them mostly within modules.<\/p>\n<p>Here are a few examples of how you can use hover options!<\/p>\n<h3>How To Change a Background Color on Hover for a Blurb Module<\/h3>\n<p>To change a blurb&#8217;s background color on hover, follow these steps.<\/p>\n<p>Hover over the blurb module and click the gear icon to bring up the module settings.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15016\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"730\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3-300x122.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3-1024x415.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3-768x311.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoverblurb3-1536x623.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Click on the Content tab and open the Background settings group.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15017\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1186\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3-300x198.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3-1024x675.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3-768x506.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-hoverblurb3-1536x1012.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Hover over the background and click the hover icon and click into the hover tab.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15018\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1165\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3-300x194.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3-1024x663.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3-768x497.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-hoverblurb3-1536x994.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Set the hover background color.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15019\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1179\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3-300x197.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3-1024x671.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3-768x503.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/3-hoverblurb3-1536x1006.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Click the green check button to save your edits.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15020\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1192\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3-300x199.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3-1024x678.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3-768x509.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/4-hoverblurb3-1536x1017.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>And here&#8217;s the result!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/6-hoverblurb2.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/6-hoverblurb2.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3>How to Change the Blurb Image or Icon\u00a0 On Hover<\/h3>\n<p>To change the blurb icon on hover, follow these steps:<\/p>\n<ol>\n<li>Navigate to the Content tab.<\/li>\n<li>Click into the Image &amp; Icon settings group.<\/li>\n<li>Hover over the Icon to bring up the hover icon.<\/li>\n<li>Click into the hover tab.<\/li>\n<li>Choose the icon you want to display on hover.<\/li>\n<li>Save your edits.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12811\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover.png\" alt=\"change icon hover\" width=\"1800\" height=\"1312\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover-300x219.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover-1024x746.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover-768x560.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/change-icon-hover-1536x1120.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>And here&#8217;s the result!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-hoverblurb.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/7-hoverblurb.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3>How to Change Blurb Body Text Color On Hover<\/h3>\n<ol>\n<li>Click in to the Design tab.<\/li>\n<li>Open the Body Text settings group.<\/li>\n<li>Navigate to the Text Color and hover over it and click the hover icon.<\/li>\n<li>Click in to the hover tab.<\/li>\n<li>Set the text color to #ffffff.<\/li>\n<li>Click the green check button to save your edits.<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15025\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb.jpg\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1269\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb.jpg 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb-300x212.jpg 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb-1024x722.jpg 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb-768x541.jpg 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/8-hoverblurb-1536x1083.jpg 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Here is the final result.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/9-hoverblurb.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/9-hoverblurb.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2>Using Hover Options in Sections, Rows, and Columns<\/h2>\n<p>Hover options are available within sections, rows, and columns too.<\/p>\n<h3>Change a Column&#8217;s Background Color<\/h3>\n<p>In the example below let&#8217;s change a column&#8217;s background color on hover.<\/p>\n<p>Open up the row settings and click the gear icon next to the column to bring up the column settings.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12877\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column.png\" alt=\"column options\" width=\"1800\" height=\"971\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column-300x162.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column-1024x552.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column-768x414.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-change-column-1536x829.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Navigate to the Background settings group and click to expand it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12878\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column.png\" alt=\"divi background hover options\" width=\"1800\" height=\"921\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column-300x154.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column-1024x524.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column-768x393.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-change-column-1536x786.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Hover over the Background, click the hover icon, and click into the hover tab. Then add the background color. Make sure to save your edits!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12879\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column.png\" alt=\"add background color Divi\" width=\"1800\" height=\"957\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column-300x160.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column-1024x544.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column-768x408.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-change-column-1536x817.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>And here is the final result!<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/column-example-final_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/column-example-final.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3>Changing Hover States in Sections and Rows<\/h3>\n<p>You&#8217;re also able to change content, design, and advanced options on hover with Sections and Rows too. Use the same steps above to access those.<\/p>\n<h3>How to Control Transition Duration of Hover Effects<\/h3>\n<p>When hover effects are applied to an element there is a default speed and duration that they happen. You can tweak the hover effect&#8217;s speed and duration by navigating to <strong>Advanced &gt; Transitions<\/strong> and adjusting the controls available there. You can adjust the duration, delay, and speed curve of the hover effect.<\/p>\n<p>Transition settings are located in the advanced tab of modules, columns, rows, and sections.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12673\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps.png\" alt=\"Divi transition settings\" width=\"1800\" height=\"1270\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps-300x212.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps-1024x722.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps-768x542.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/20-hoversteps-1536x1084.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>By combining hover options and transition effects, you can change the way your hover effects behave. You can control the duration of the transition by adjusting the duration slider. Additionally, you can set a delay for your transition if you&#8217;d like it to start before or after another transition effect. Lastly, there is an option to set the speed curve using several different options.<\/p>\n<p>For example, a 50px white border is applied to an image on hover. The transition duration is set to 300ms with no delay and the transition speed curve is set to Ease.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-imageborderhover.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/1-imageborderhover.webm\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>Taking the same example as above, we&#8217;ll adjust the transition duration to 0ms, with no delay, and the transition speed curve set to Linear. See how much faster and snappier it is? Tweaking these settings allows you to create truly custom transitions that achieve your desired effect.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-imageborderhover.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2-imageborderhover.webm\" type=\"video\/mp4\" \/><\/video><\/p>\n<h3>Using Transform Options With Hover Options<\/h3>\n<p>Combining Transform Options with Hover Options gives you the power to create even more dynamic designs. Below is an example of some of the effects you can achieve when combining these two options.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/button-hover-examples.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/button-hover-examples.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>To learn how to recreate this demo, check out <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-design-icon-buttons-with-divis-icon-module\">this blog post<\/a>. To learn more about Transform Options, check out our <a href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-transition-options\/\">Transform Options Documentation<\/a>.<\/p>\n<h2 id=\"element-specific\">Hover Options Are Element Specific<\/h2>\n<p>Hover options are activated when hovering over the space of a specific Divi element. Hover space refers to the entire element and the space within it.<\/p>\n<h3>Parent \/ Child Element Hierarchy<\/h3>\n<p>When applying hover effects in Divi it\u2019s important to remember the hierarchy of Divi\u2019s sections, rows, columns, and modules. Sections contain rows, rows contain columns, and columns contain modules. These are called parent and child elements. Child elements are nested inside parent elements and are affected by any design styling you apply to the parent element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12546\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild.png\" alt=\"applying Divi hover effects\" width=\"1800\" height=\"1080\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild-300x180.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild-1024x614.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild-768x461.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hoverparentchild-1536x922.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3>Hover Options Are Set At The Element Level<\/h3>\n<p>To understand how Divi hover options work, it&#8217;s important to note that <strong>hover options are set at the element level<\/strong>.\u00a0 Each Divi element has its own hover space which is basically the size of the element itself. Here is an illustration of the hover space for each building block element in Divi.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12533\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02.png\" alt=\"hover effects at element level\" width=\"1800\" height=\"1080\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02-300x180.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02-1024x614.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02-768x461.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/1-hover-space-012-02-1536x922.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Each of these elements has built-in hover options that are activated when hovering over that element or any of the child elements it contains.<\/p>\n<p>So, for example, if you have added hover options to a section, only those hover options will become active whenever you hover over the section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12550\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space.png\" alt=\"built-in hover effects\" width=\"1800\" height=\"958\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space-300x160.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space-1024x545.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space-768x409.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/2-hover-space-1536x817.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>If you hover over the row inside the section, you will activate any hover options added to the row. But because the row is a child of the section, you will also activate the section hover options as well.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12551\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1.png\" alt=\"activate hover options\" width=\"1800\" height=\"958\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1-300x160.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1-1024x545.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1-768x409.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/3-hover-space-1-1536x817.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Hovering over the column within the row will activate any hover options added to the column and its parent row and section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12552\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1.png\" alt=\"parent row options\" width=\"1800\" height=\"958\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1-300x160.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1-1024x545.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1-768x409.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/4-hover-space-1-1536x817.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Hovering over the module within the column will activate any hover options added to the module as well as its parent elements that have hover options (column, row, and section).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-12553\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1.png\" alt=\"module hover effects\" width=\"1800\" height=\"958\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1-300x160.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1-1024x545.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1-768x409.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/5-hover-space-1-1536x817.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>Basically, when you hover over a module that will also trigger its parent elements&#8217; hover effects. However, when you hover over just a section, it will not trigger the module hover effects.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/hover-hierarchy_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hover-hierarchy.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<h2 id=\"example-hover-effects\">Use Case Examples for Divi Hover Options<\/h2>\n<p>Let&#8217;s take a look at some practical use case examples of where you would use hover options.<\/p>\n<h3>Apply Hover Effect to Icon Buttons and Social Media Follow Buttons<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-12714\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/sb24.gif\" alt=\"Divi Hover Options\" width=\"548\" height=\"236\" \/><\/p>\n<p>It is always a good idea to use hover options on buttons to encourage users to click. With Divi, you can add simple and creative hover effects to icon buttons. This also includes social media follow buttons as well. Check out this tutorial on <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-unique-social-media-follow-button-hover-effects-with-divi\">how to create unique social media follow button hover effects<\/a> in Divi.<\/p>\n<h3>Add Hover Effects To Images and Image Galleries<\/h3>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"true\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2desktop-hover.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/2desktop-hover.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>With Divi&#8217;s hover effect, you can easily change the design of your images on hover in creative ways. This is great for images and image galleries that allow the user to see a alternative image design (like a black and white version of the image) on hover. Plus, you can combine this hover effect with clickable lightbox functionality as well.<\/p>\n<h3>Use Hover Options to Show or Hide Content?<\/h3>\n<p>By adjusting the opacity of your elements, you can show or hide elements on hover. Modules such as buttons, images, social media, or even full sections of content can be manipulated to create stunning effects with hovers.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/hover-opacity_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hover-opacity.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>This is perfect for a call to action or for showcasing featured products.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/Cake-Demo-Hover-Effect.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/Cake-Demo-Hover-Effect.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>For more, check out <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-change-content-on-hover-to-create-3-unique-ctas-in-divi\">how to change content on hover to create unique CTAs<\/a> in Divi.<\/p>\n<h3>Applying Hover Options to Multiple Elements Activated Simultaneously<\/h3>\n<p>Hover options are applied to each individual element, however, it <em>is<\/em> possible to create simultaneous hover effects when hovering over child elements. For example, if you make sure all elements span the full width of their parent container, this would allow them to all share the same hover space. Now, whenever hovering over an element it will activate the hover effects for each element simultaneously.<\/p>\n<p>Below is a row, column, and module that all share the same hover space. Therefore, hovering over their shared area will activate each of their hover options simultaneously.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/hovers-activated-simultaenously_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hovers-activated-simultaenously.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>For more, check out <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-trigger-hover-effects-for-a-module-column-and-row-simultaneously\" target=\"_blank\" rel=\"noopener\">how to trigger hover effects on elements simultaneously in Divi<\/a>.<\/p>\n<p>You can also get creative with combining hover effects on multiple elements to reveal content in clever ways. For example, you can <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/creating-pop-out-service-descriptions-on-hover-with-divi\">create pop-out service descriptions<\/a> when hovering over a multiple column row in Divi.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"with-border aligncenter size-full wp-image-12712\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/pop27-1.gif\" alt=\"Divi Hover Options\" width=\"880\" height=\"410\" \/><\/p>\n<h3>Using Blur On Hover To Highlight Content<\/h3>\n<p>Additionally, you can combine hover options and visibility settings to achieve some pretty cool effects. For example, when using a blurb module you can spotlight the blurb module by blurring out the rest of the content on the page on hover.<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/blurb-blur-example_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/blurb-blur-example.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>For more, check out <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-highlight-a-hovered-blurb-module-by-blurring-the-other-ones-with-divi\">How to Highlight a Hovered Blurb Module by Blurring the Other Ones with Divi<\/a>.<\/p>\n<h2 id=\"faq-hover-options\">FAQ: Divi Hover Options<\/h2>\n<h3>How do I turn an element with hover effects into a clickable link?<\/h3>\n<p>Turning an element into a clickable link (whether that be a section, row, column, or module) is easy in Divi. Simply open up the element&#8217;s settings navigate to <strong>Content &gt; Link<\/strong> and paste the URL there.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12832\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link.png\" alt=\"Divi Hover Options\" width=\"1800\" height=\"966\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link-300x161.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link-1024x550.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link-768x412.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/clickable-link-1536x824.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3>Should I Use Hover Options on Mobile?<\/h3>\n<p>There really is no &#8220;hover&#8221; capability on mobile devices. The closest thing to hover is touch. In most mobile browsers, hover effects will be triggered on touch. Although this can be useful for certain functionality like toggles or revealing content on touch, it is not recommended as a best practice. This is especially true when using hover effects on links and buttons on mobile. If you have a hover effect on a clickable link, users may need to click on the element twice (once to trigger the hover effect and then another to click the link). That is why in most cases it would be better to disable hover effects on mobile devices.<\/p>\n<h3>How Do I Disable Hover Options on Mobile?<\/h3>\n<p>If some of your hover effects reveal hidden content on hover, then that could be a problem on mobile devices since they don&#8217;t have hovering capabilities. To solve this issue, we recommend setting your mobile design styles to match your hover state design styles so that hidden content is visible on mobile devices.<\/p>\n<p>For example, below we have text that appears on hover, however, we&#8217;ll need that text to be visible on mobile <em>without<\/em> the need to hover over it (since hovering on mobile isn&#8217;t really a thing).<\/p>\n<p><video class=\"with-border\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"150\"><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/hover-mobile_1.webm\" type=\"video\/webm\" \/><source src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/hover-mobile.mp4\" type=\"video\/mp4\" \/><\/video><\/p>\n<p>To remedy this situation, let&#8217;s go into the mobile design settings for the background color and text color and make them match with the hover state styles so that this content is displayed on mobile devices without having to hover.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-12867 aligncenter\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1.png\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1006\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1-300x168.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1-1024x572.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1-768x429.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile1-1536x858.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-12868 aligncenter\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2.png\" alt=\"Divi Hover Options\" width=\"1800\" height=\"1006\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2.png 1800w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2-300x168.png 300w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2-1024x572.png 1024w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2-768x429.png 768w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/09\/on-mobile2-1536x858.png 1536w\" sizes=\"auto, (max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<h3>Will Hiding and Showing Content on Hover Affect SEO?<\/h3>\n<p>No. It&#8217;s important to understand that your content is still <em>there<\/em>, you are only adjusting the transparency of them. Therefore, Google and other search engines will be able to see them in the code. You can rest assured that using Divi&#8217;s hover effects will not affect on your site&#8217;s SEO.<\/p>\n<h2 id=\"best-practices\">Tips &amp; Best Practices For Hover Options<\/h2>\n<p>There&#8217;s no limit to Divi&#8217;s Hover Options, however, there are a few things to keep in mind when you are deploying them.<\/p>\n<h3>Be Purposeful When Using Hover Options<\/h3>\n<p>Changing the style of an element on hover will prompt the user with some type of further engagement or call to action (like clicking on the element). That&#8217;s why in most cases hover effects are used on buttons because most people will think that the hover effect means it is clickable. Thankfully, Divi allows you to add a link URL to any element to make it clickable in addition to hover options added. Of course, you can also do other purposeful hover effects like revealing additional content which will engage the user to read more about a feature. But, in most cases, it&#8217;s best to avoid adding hover effects strictly for the sake of design. This may affect user experience in a negative way, leaving them confused about the purpose of the hover effect.<\/p>\n<h3>Hover Options are great for Desktop, but not Mobile<\/h3>\n<p>It&#8217;s generally a good idea to only apply hover effects on desktop views. While hover effects can be applied to mobile devices, it&#8217;s discouraged because users will usually have to double tap to see the effect. This can be confusing and frustrating to your site&#8217;s visitors, or they may miss the effects altogether. Good use of animation is encouraged, but keep the user&#8217;s experience in mind when using them.<\/p>\n<h3>Use Hover Options to Highlight an Element<\/h3>\n<p>Using hover effects to highlight an important area of your site is a great idea to draw your visitor&#8217;s attention. Any micro-animation hover effect on a link or button will help users understand it is clickable. You may also consider using a hover effect to change an important line of text or a call-to-action module.<\/p>\n<p>When deciding which elements to use hover effects on, consider your options carefully. Modules such as buttons, call to actions, and blurbs are all great options to help get your message across. Another idea would be to use hover options on columns containing important information. Differing background colors on hover is an excellent way to highlight content.<\/p>\n<h3>Don&#8217;t Overdo Hover Options<\/h3>\n<p>While animation and interactive elements are a great way to boost user engagement, be careful not to overdo it. Using too much animation or visual effects can confuse visitors. This can potentially cause them to miss your message all together. Keep effects to a minimum and only highlight the most important areas of your pages.<\/p>\n<h3>Tips for Transform Hover Options<\/h3>\n<p>When using transform options on hover, consider avoiding transform translate to move an element on hover. This will cause jumping in some cases when the cursor falls outside the element during the hover effect. Using transform scale (in addition to translate and\/or rotate) to increase the size of the element is a good way to achieve the look you are going for without distracting your users with jumpy, unpredictable results.<\/p>\n<p>Transition hover options are perfect for icons or <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-design-icon-buttons-with-divis-icon-module\">icon buttons<\/a> because you can add microinteractions to them (like scale or rotate) to make them more engaging.<\/p>\n<p>Transform rotate works best on circular elements. To make any element circular, simply set the rounded corners option values to 50% on all four corners.<\/p>\n<h2 id=\"more-resources\">Continue Learning<\/h2>\n<p>Hover options can help you create stunning layouts in Divi. To learn how to create some of the effects we feature in our post, check out these great tutorials to sharpen your design skills while learning how to use Divi&#8217;s hover options.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-add-hover-social-icons-to-team-member-images-with-divi\">How to Add Hover Social Icons to Team Member Images with Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-reveal-content-on-hover-with-expanding-corner-tabs-in-divi-free-download\">How to Reveal Content on Hover with Expanding Corner Tabs in Divi (FREE Download)<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-combine-hover-effects-with-css-parallax-backgrounds-in-divi\">How to Combine Hover Effects with CSS Parallax Backgrounds in Divi<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-trigger-hover-effects-for-a-module-column-and-row-simultaneously\">How to Trigger Hover Effects for a Module, Column, and Row Simultaneously<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-create-an-eye-catching-cta-in-divi-with-a-few-simple-hover-effects\">How to Create an Eye-Catching CTA in Divi with a Few Simple Hover Effects<\/a><\/li>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-change-content-on-hover-to-create-3-unique-ctas-in-divi\">How to Change Content on Hover to Create Unique CTAs in Divi (3 Ways)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Apply hover states to the content settings, design settings, and advanced settings of virtually any Divi design element (sections, rows, columns, and modules).<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2],"tags":[],"class_list":["post-12353","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"description\" content=\"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Divi Hover Options - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-29T19:28:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-03T22:51:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg\" \/>\n<meta name=\"author\" content=\"Chaucee Stillman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaucee Stillman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/\"},\"author\":{\"name\":\"Chaucee Stillman\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"headline\":\"Using Divi Hover Options\",\"datePublished\":\"2022-12-29T19:28:05+00:00\",\"dateModified\":\"2023-02-03T22:51:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/\"},\"wordCount\":3087,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/0-hoversteps-01.jpg\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/\",\"name\":\"Using Divi Hover Options - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/0-hoversteps-01.jpg\",\"datePublished\":\"2022-12-29T19:28:05+00:00\",\"dateModified\":\"2023-02-03T22:51:23+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\"},\"description\":\"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/0-hoversteps-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/0-hoversteps-01.jpg\",\"width\":1800,\"height\":897},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/divi-hover-options\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Divi Hover Options\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/3de16ce355468e6b8ba5b9c41fddf1e8\",\"name\":\"Chaucee Stillman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g\",\"caption\":\"Chaucee Stillman\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","description":"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/","og_locale":"en_US","og_type":"article","og_title":"Using Divi Hover Options - Elegant Themes Documentation","og_description":"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!","og_url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2022-12-29T19:28:05+00:00","article_modified_time":"2023-02-03T22:51:23+00:00","og_image":[{"url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg","type":"","width":"","height":""}],"author":"Chaucee Stillman","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaucee Stillman","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/"},"author":{"name":"Chaucee Stillman","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"headline":"Using Divi Hover Options","datePublished":"2022-12-29T19:28:05+00:00","dateModified":"2023-02-03T22:51:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/"},"wordCount":3087,"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/","url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/","name":"Using Divi Hover Options - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#primaryimage"},"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg","datePublished":"2022-12-29T19:28:05+00:00","dateModified":"2023-02-03T22:51:23+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8"},"description":"Divi Hover Options makes it easy to apply unique and eyecatching hover effects on your WordPress website with just a few clicks!","breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#primaryimage","url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg","contentUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2022\/12\/0-hoversteps-01.jpg","width":1800,"height":897},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/divi-hover-options\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Using Divi Hover Options"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/3de16ce355468e6b8ba5b9c41fddf1e8","name":"Chaucee Stillman","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59f7363034124f1df7ab033be2af9b43b4d1b965245e21d0c5b610ca896cd534?s=96&d=mm&r=g","caption":"Chaucee Stillman"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/12353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=12353"}],"version-history":[{"count":163,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/12353\/revisions"}],"predecessor-version":[{"id":15276,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/12353\/revisions\/15276"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=12353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=12353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=12353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}