{"id":28405,"date":"2023-02-04T07:12:36","date_gmt":"2023-02-04T06:12:36","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=28405"},"modified":"2023-02-04T07:12:38","modified_gmt":"2023-02-04T06:12:38","slug":"divi-hover-effects","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/","title":{"rendered":"How to Create Divi Hover Effects"},"content":{"rendered":"\n<p><strong>You want to add some hover effects to your <a href=\"https:\/\/www.markhendriksen.com\/divi-modules-guide\/\">Divi modules<\/a>, but you&#8217;re not sure how.<\/strong><\/p>\n\n\n\n<p>Adding custom hover effects to your Divi website can be a great way to make your website more interesting and engaging for your visitors.<\/p>\n\n\n\n<p>With this easy-to-follow guide, you&#8217;ll be able to add hover effects to any <a href=\"https:\/\/www.markhendriksen.com\/divi-builder-plugin-review-by-elegant-themes\/\">Divi builder<\/a> in minutes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of contents<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#hover-effects\">How do I add hover effects in Divi?<\/a><\/li><li><a href=\"#image-hover\">How do I add a hover effect to the Divi image module?<\/a><\/li><li><a href=\"#hover-blurb\">How do you add a hover effect to the Divi blurb module?<\/a><\/li><li><a href=\"#image-hover-module\">Divi image hover module<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hover-effects\">How do I add hover effects in Divi?<\/h3>\n\n\n\n<p>It is very easy to apply Divi hover effects to your website. Not only are they easy to find, but you can apply Divi hover effects to almost any section, row, or module.<\/p>\n\n\n\n<p>Just select the element you want to get creative with and Divi&#8217;s options panel will let you customize its appearance on hover.<\/p>\n\n\n\n<p>Whether it is a transition from one color to another or an animated transformation, Divi&#8217;s hover effects give you the power to make your Divi page stand out from the rest!<\/p>\n\n\n\n<p>I will give you an example of a button module, the button has a red background color and I will make it orange on hover.<\/p>\n\n\n\n<p>When you hover with your mouse over the element title, some options will be visible. Click on the little arrow to open up the hover options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"661\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects.jpg\" alt=\"Find the hover effects in Divi\" class=\"wp-image-28415\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects.jpg 630w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects-380x399.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects-286x300.jpg 286w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects-510x535.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects-57x60.jpg 57w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Find-the-hover-effects-86x90.jpg 86w\" sizes=\"(max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<p>Now you can click on the hover tab. And now you can set a background color for the hover state of this button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"632\" height=\"661\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi.jpg\" alt=\"Enable the hover options in Divi\" class=\"wp-image-28416\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi.jpg 632w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi-380x397.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi-287x300.jpg 287w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi-510x533.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi-57x60.jpg 57w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-the-hover-options-in-Divi-86x90.jpg 86w\" sizes=\"(max-width: 632px) 100vw, 632px\" \/><\/figure>\n\n\n\n<p>This works the same for any other element like font sizes, text colors, shadow effects, background image, etc.<\/p>\n\n\n\n<p>In the next sections, I will give you some examples of the most popular hover effects for some of the Divi modules.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"image-hover\">How do I add a hover effect to the Divi image module?<\/h2>\n\n\n\n<p>With the image module, you can do a ton of really cool hover effects. I will give you some examples of popular Divi image hover effects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Divi image swap<\/h3>\n\n\n\n<p>Open your image module and expand the image tab. Place an image in the default state tab and then switch to the hover tab and place an image here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"423\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image.jpg\" alt=\"Swap a Divi image\" class=\"wp-image-28417\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image-380x236.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image-300x187.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image-510x317.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image-96x60.jpg 96w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Swap-a-Divi-image-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Make sure your image size for both images is the same. When you hover over your image it will change to the second image (you need to disable the visual builder).<\/p>\n\n\n\n<p>You will notice that the image transition duration is instant. Divi does come with transition options however, they do not work for image swap.<\/p>\n\n\n\n<p>You can follow this tutorial, &#8220;<a href=\"https:\/\/www.markhendriksen.com\/how-to-swap-image-on-hover\/\">How To Swap Image On Hover<\/a>&#8221; to swap out images in Divi with a transition effect with some custom CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Create an image overlay on hover<\/h3>\n\n\n\n<p>First, you have to place a link in your Divi image module. You have to do this in order to enable the overlay options for the image module.<\/p>\n\n\n\n<p>This can be a dummy link.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"664\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options.jpg\" alt=\"Add a link in your Divi image module to enable overlay options\" class=\"wp-image-28418\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options.jpg 628w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options-380x402.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options-284x300.jpg 284w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options-510x539.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options-57x60.jpg 57w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Add-a-link-in-your-image-module-to-enable-overlay-options-85x90.jpg 85w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<p>After that switch to the design tab and you will notice that the Overlay tab is visible. This is only visible when you have added a link.<\/p>\n\n\n\n<p>From here you can add a hover overlay background color and icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"576\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options.jpg\" alt=\"Enable Divi overlay options\" class=\"wp-image-28419\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options.jpg 658w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options-380x333.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options-300x263.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options-510x446.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options-69x60.jpg 69w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Enable-divi-overlay-hover-options-103x90.jpg 103w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p>I recommend following my <a href=\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\">Divi image overlay<\/a> tutorial to add advanced hover effects to your Divi overlay images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hover-blurb\">How do you add a hover effect to the Divi blurb module?<\/h2>\n\n\n\n<p>You can create all sorts of hover effects for your Divi blurb modules in <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">the Divi theme<\/a>. I will show you 3, and explain which Divi module settings I have used to create the hover effects.<\/p>\n\n\n\n<p>These are the 3 blurb modules I have created:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"298\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-blurb-hover-examples.gif\" alt=\"Divi blurb hover examples\" class=\"wp-image-28425\"\/><\/figure>\n\n\n\n<p>I assume you know how to populate the blurb module so I will only cover the hover effects that I have used.<\/p>\n\n\n\n<p><strong>First blurb module<\/strong><\/p>\n\n\n\n<p>For the first module, I used a transform scale setting on the hover state. You can find this option under the Design tab &gt; Transform. I set the hover state to 105%, so when you hover over the blurb module it will increase in size.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"464\" height=\"638\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi.jpg\" alt=\"Transform hover option for Divi\" class=\"wp-image-28420\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi.jpg 464w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi-380x523.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi-218x300.jpg 218w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi-44x60.jpg 44w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Transform-option-to-create-a-hover-effect-for-the-blurb-module-in-Divi-65x90.jpg 65w\" sizes=\"(max-width: 464px) 100vw, 464px\" \/><\/figure>\n\n\n\n<p><strong>Second blurb<\/strong><\/p>\n\n\n\n<p>For this blurb, I removed the shadow and replaced it with a border on hover. When you have added a shadow, you can then change the shadow color for the hover state, I set this to fully transparent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"556\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover.jpg\" alt=\"Set the shadow to transparent\" class=\"wp-image-28421\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover-380x311.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover-300x245.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover-510x417.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover-73x60.jpg 73w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Set-shadow-color-to-transparant-on-hover-110x90.jpg 110w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>The border needs to be visible only on hover, to do this set the default state of the border color to fully transparent, and the hover state to a grey color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"568\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect.jpg\" alt=\"Set the border hover color\" class=\"wp-image-28422\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect-380x317.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect-300x251.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect-510x426.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect-72x60.jpg 72w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/border-hover-effect-108x90.jpg 108w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p><strong>Third blurb<\/strong><\/p>\n\n\n\n<p>For the last blurb, I have set the background color on hover to black (set the default color to white). You can swap the image with the same method as I have explained in the previous section. I have then changed the title text and body font color on hover.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"image-hover-module\">Divi image hover module<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"380\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module.jpg\" alt=\"Divi image overlay hover module\" class=\"wp-image-28270\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module-380x212.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module-300x168.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module-510x285.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module-107x60.jpg 107w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-hover-module-161x90.jpg 161w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>The Divi image hover module allows you to add hover effects to your images. This <a href=\"https:\/\/www.markhendriksen.com\/best-divi-plugins\/\">Divi plugin<\/a> comes with more than 250 animations for your Divi images. It is the most versatile plugin for your images that is available on the Elegant Themes marketplace.<\/p>\n\n\n\n<p><strong>Key features<\/strong><\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li>250+ animation types<\/li><li>5 hover effects for image swap<\/li><li>Style the lightbox<\/li><\/ul>\n\n\n\n<p class=\"link-button\"><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=78591\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">See Demo<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Adding Divi hover effects to your website is a great way to make it more interesting and engaging for visitors. With this easy-to-follow guide, you can add hover effects to any Divi builder in minutes.<\/p>\n\n\n\n<p>If you have any questions please let me know in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You want to add some hover effects to your Divi modules, but you&#8217;re not sure how. Adding custom hover effects to your Divi website can be a great way to make your website more interesting and engaging for your visitors. With this easy-to-follow guide, you&#8217;ll be able to add hover effects to any Divi builder [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":28428,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-28405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Divi Hover Effects | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"Divi hover effects are a great way to add something extra&#039;s to your website. In this tutorial, you will be learning how create hover effects.\" \/>\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.markhendriksen.com\/divi-hover-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Divi Hover Effects | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"Divi hover effects are a great way to add something extra&#039;s to your website. In this tutorial, you will be learning how create hover effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-04T06:12:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-04T06:12:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create Divi Hover Effects\",\"datePublished\":\"2023-02-04T06:12:36+00:00\",\"dateModified\":\"2023-02-04T06:12:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\"},\"wordCount\":917,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\",\"url\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\",\"name\":\"How to Add Divi Hover Effects | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg\",\"datePublished\":\"2023-02-04T06:12:36+00:00\",\"dateModified\":\"2023-02-04T06:12:38+00:00\",\"description\":\"Divi hover effects are a great way to add something extra's to your website. In this tutorial, you will be learning how create hover effects.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi hover effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Divi Hover Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Divi Hover Effects | MarkHendriksen.com","description":"Divi hover effects are a great way to add something extra's to your website. In this tutorial, you will be learning how create hover effects.","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.markhendriksen.com\/divi-hover-effects\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Divi Hover Effects | MarkHendriksen.com","og_description":"Divi hover effects are a great way to add something extra's to your website. In this tutorial, you will be learning how create hover effects.","og_url":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-02-04T06:12:36+00:00","article_modified_time":"2023-02-04T06:12:38+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create Divi Hover Effects","datePublished":"2023-02-04T06:12:36+00:00","dateModified":"2023-02-04T06:12:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/"},"wordCount":917,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/divi-hover-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/","url":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/","name":"How to Add Divi Hover Effects | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg","datePublished":"2023-02-04T06:12:36+00:00","dateModified":"2023-02-04T06:12:38+00:00","description":"Divi hover effects are a great way to add something extra's to your website. In this tutorial, you will be learning how create hover effects.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/divi-hover-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/02\/Divi-hover-effects.jpg","width":720,"height":400,"caption":"Divi hover effects"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/divi-hover-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Create Divi Hover Effects"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/28405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=28405"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/28405\/revisions"}],"predecessor-version":[{"id":30172,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/28405\/revisions\/30172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/28428"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=28405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=28405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=28405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}