{"id":28230,"date":"2023-01-29T07:32:21","date_gmt":"2023-01-29T06:32:21","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=28230"},"modified":"2023-01-29T07:32:23","modified_gmt":"2023-01-29T06:32:23","slug":"how-to-create-a-divi-image-overlay","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/","title":{"rendered":"How to Create a Divi Image Overlay"},"content":{"rendered":"\n<p><strong>Learn how to create an engaging Divi image overlay that will keep your visitors interested in your site. This tutorial covers everything you need to know!<\/strong><\/p>\n\n\n\n<p>Are you looking to make your <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">Divi website<\/a> stand out against the competition? One of the best ways to do that is with image overlays\u2014a background image combined with a background layer containing text and other elements.<\/p>\n\n\n\n<p>Not only does this technique add visual interest, but it also helps draw attention to links and calls to action. In this tutorial, I\u2019ll show you how you can quickly turn any of your images into eye-catching image overlays using Divi\u2019s built-in tools!<\/p>\n\n\n\n<p>Here is a sneak peek of what we are going to create.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"300\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay-demo.gif\" alt=\"Divi image overlay examples\" class=\"wp-image-28271\"\/><\/figure>\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=\"#bg-image-overlay\">How to create a background image overlay<\/a><\/li><li><a href=\"#bg-image-overlay-hover\">How to create an image overlay on hover<\/a><\/li><li><a href=\"#bg-image-overlay-hover-title-and-button\">How to create an image overlay on hover with a title and button<\/a><\/li><li><a href=\"#divi-image-hover-module\">Divi Image Hover Module<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bg-image-overlay\">How to create a background image overlay<\/h2>\n\n\n\n<p>If you just want to add transparent background color on top of your image follow these steps.<\/p>\n\n\n\n<p>Place an image module on your page and open it. Place an image in it and go to the Advanced tab.<\/p>\n\n\n\n<p>Place the following CSS class: divi-image-overlay-bg.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"642\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg.jpg\" alt=\"Add a class to the image module\" class=\"wp-image-28250\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg.jpg 479w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-380x509.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-224x300.jpg 224w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-67x90.jpg 67w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>Now place a code module under your image and copy\/paste the following code into it:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code>&lt;style>\r\n.divi-image-overlay-bg:before {\r\n   content:\"\";\r\n   position:absolute;\r\n   height: 100%;\r\n   width: 100%;\r\n   background-color: rgb(233 75 0 \/ 50%); \/* set you overlay color *\/\r\n   z-index: 9;\r\n}      \r\n&lt;\/style><\/code><\/pre>\n\n\n\n<p>Under the background color, you can change your own color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"627\" height=\"659\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image.jpg\" alt=\"CSS for the code module\" class=\"wp-image-28251\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image.jpg 627w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image-380x399.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image-285x300.jpg 285w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image-510x536.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image-57x60.jpg 57w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-for-overlay-image-86x90.jpg 86w\" sizes=\"(max-width: 627px) 100vw, 627px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bg-image-overlay-hover\">How to create an image overlay on hover<\/h2>\n\n\n\n<p>This is very easy to do and does not require any custom code. Just place an image module on your page and add an image to it.<\/p>\n\n\n\n<p>Then expand the Link tab and place either a link or a dummy link into it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"640\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module.jpg\" alt=\"Add a link to the image\" class=\"wp-image-28253\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module.jpg 479w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module-380x508.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module-225x300.jpg 225w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/add-a-link-to-yourr-image-module-67x90.jpg 67w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<p>After that navigate to the Design tab and expand the Overlay tab. The overlay tab will only be visible when you add a link to your image. That&#8217;s why we did that in the previous step.<\/p>\n\n\n\n<p>From here it is very straightforward, enable the Image overlay and all the options will be visible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"643\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay.jpg\" alt=\"Enable image overlay\" class=\"wp-image-28254\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay.jpg 480w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay-380x509.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay-224x300.jpg 224w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Enable-image-overlay-67x90.jpg 67w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>If you do not want an icon on your overlay then you can just set the color to transparent.<\/p>\n\n\n\n<p>On the hover overlay color, you can set your overlay image color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"bg-image-overlay-hover-title-and-button\">How to create an image overlay on hover with a title and button<\/h2>\n\n\n\n<p>We are going to create an overlay image with inside a title, text, and a button. You can add any module you like.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create the structure<\/h3>\n\n\n\n<p>Start by adding a section and a row, I use a 1\/3 column structure but you can use any structure you like.<\/p>\n\n\n\n<p>Open the row and then the column. Go to the Advanced tab and place the following CSS class divi-column-overlay.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"725\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column.jpg\" alt=\"Add thhe class divi column overlay\" class=\"wp-image-28255\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column.jpg 575w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column-380x479.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column-238x300.jpg 238w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column-510x643.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column-48x60.jpg 48w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-CSS-class-to-the-Divi-column-71x90.jpg 71w\" sizes=\"(max-width: 575px) 100vw, 575px\" \/><\/figure>\n\n\n\n<p>Inside the column, place a new image module.<\/p>\n\n\n\n<p>Open the image module and place an image under the image tab. After that go to the design tab and Under Spacing set the bottom margin to 0px.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"723\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px.jpg\" alt=\"Image module bottom margin\" class=\"wp-image-28256\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px.jpg 577w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px-380x476.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px-239x300.jpg 239w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px-510x639.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px-48x60.jpg 48w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Image-module-bottom-margin-0px-72x90.jpg 72w\" sizes=\"(max-width: 577px) 100vw, 577px\" \/><\/figure>\n\n\n\n<p>Then go to the Advanced tab and place the CSS class divi-image-overlay.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"642\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1.jpg\" alt=\"Add the CSS class divi image overlay background\" class=\"wp-image-28257\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1.jpg 479w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1-380x509.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1-224x300.jpg 224w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-the-class-divi-image-overlay-bg-1-67x90.jpg 67w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the background overlay<\/h3>\n\n\n\n<p>Under the image module you can place a Divider module, we will be using this for the image overlay color.<\/p>\n\n\n\n<p>Disable the setting Show Divider under Visibility.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"550\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module.jpg\" alt=\"Add a divider module\" class=\"wp-image-28258\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module-380x307.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module-300x243.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module-510x413.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module-74x60.jpg 74w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Add-a-divider-under-the-image-module-111x90.jpg 111w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>After that expand the Background tab. You can add a background or a background gradient color. If you want a transparent color so the background color shines through the background image then you have to set a transparency, you can do that on the right side of the color window.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"542\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image.jpg\" alt=\"Sett a gradient background color\" class=\"wp-image-28259\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image-380x303.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image-300x239.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image-510x407.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image-75x60.jpg 75w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-a-gradient-background-color-for-your-overlay-image-113x90.jpg 113w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Now head to the design tab and under Sizing set the height to 100%.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"542\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height.jpg\" alt=\"Set the divider height to 100%\" class=\"wp-image-28260\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height-380x303.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height-300x239.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height-510x407.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height-75x60.jpg 75w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-to-100-height-113x90.jpg 113w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>After that go to the Advanced tab and set the position to absolute.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"542\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute.jpg\" alt=\"Set the position of the divider to absolute\" class=\"wp-image-28262\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute-380x303.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute-300x239.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute-510x407.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute-75x60.jpg 75w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-divider-module-to-absolute-113x90.jpg 113w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p><strong>Note: <\/strong>The divider module is now on top of the image module and you can not target the image module to open it. If you need to open the image module then switch to wireframe view (left-bottom icon) or open the layers panel (right-bottom icon).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: The overlay heading text<\/h3>\n\n\n\n<p>Add a text module under your image and place an h2 title in the text field. This will be the overlay heading text.<\/p>\n\n\n\n<p>I have used the following settings for this title:<\/p>\n\n\n\n<p>font-family: Open-sans<br>font-weight: light<br>heading 2 text alignment: center<br>heading 2 text color: #ffffff<br>heading 2 text size: 36px<\/p>\n\n\n\n<p>Navigate to the advanced tab and place the CSS class: divi-image-overlay-item<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"644\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class.jpg\" alt=\"Place the title class\" class=\"wp-image-28264\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class.jpg 480w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class-380x510.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class-224x300.jpg 224w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Set-the-title-class-67x90.jpg 67w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<p>After that expand the Position tab and Set the Position to absolute.<\/p>\n\n\n\n<p>Set the location to top center and the vertical offset to 22%. You have to play with the vertical offset value depending on your image dimensions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"479\" height=\"643\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings.jpg\" alt=\"Title position settings\" class=\"wp-image-28265\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings.jpg 479w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings-380x510.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings-223x300.jpg 223w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Title-settings-67x90.jpg 67w\" sizes=\"(max-width: 479px) 100vw, 479px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: The overlay body text<\/h3>\n\n\n\n<p>Place another text module below the last one and add some text to this module. This will be the overlay text for the image.<\/p>\n\n\n\n<p>For the text module, I add left and right padding of 35px. So that the text sits a bit away from the edges.<\/p>\n\n\n\n<p>In the advanced tab, I use the same CSS class (divi-image-overlay-item) as previously.<\/p>\n\n\n\n<p>Under position, I use the same settings only in the location I choose center.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"641\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position.jpg\" alt=\"Center the body text\" class=\"wp-image-28266\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position.jpg 476w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position-380x512.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position-223x300.jpg 223w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position-45x60.jpg 45w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/text-center-position-67x90.jpg 67w\" sizes=\"(max-width: 476px) 100vw, 476px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: The overlay button<\/h3>\n\n\n\n<p>Place a button module under your text module and give it the following CSS class &#8220;divi-image-overlay-item&#8221;. This will be the last overlay element.<\/p>\n\n\n\n<p>I have used the following styling setting for this button:<\/p>\n\n\n\n<p>Button text size: 18px<br>Button text color: #ffffff<br>Button background color: gradient<br>Button border-width: 0px<br>Button font-weight: bold<\/p>\n\n\n\n<p>For the position, I use bottom center with a vertical offset of 15%.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"551\" height=\"653\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position.jpg\" alt=\"Button position\" class=\"wp-image-28267\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position.jpg 551w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position-380x450.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position-253x300.jpg 253w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position-510x604.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position-51x60.jpg 51w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Button-position-76x90.jpg 76w\" sizes=\"(max-width: 551px) 100vw, 551px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Add the custom CSS code<\/h3>\n\n\n\n<p>One final step to make this actually work is to place a code module on your page and place the following custom CSS code into it.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:16px\"><code>&lt;style>\r\n@media all and (min-width: 981px) {   \r\n.divi-image-overlay-item {\r\n   opacity: 0;  \r\n}   \r\n   \r\n.divi-column-overlay:hover .divi-image-overlay-item {\r\n   opacity: 1;  \r\n}\r\n   \r\n.divi-column-overlay .divi-image-overlay-item {\r\n   transition: all 300ms !important;\/* transition speed *\/ \r\n}} \r\n&lt;\/style><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"651\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay.jpg\" alt=\"CSS snippet for Divi image overlay\" class=\"wp-image-28268\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay.jpg 542w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay-380x456.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay-250x300.jpg 250w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay-510x613.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay-50x60.jpg 50w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/CSS-code-for-divi-image-overlay-75x90.jpg 75w\" sizes=\"(max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<p>Additionally, you can also place the custom CSS code in your Divi &gt; Theme Options &gt; CSS but then without the style tags.<\/p>\n\n\n\n<p>Or in case you are using a Divi child theme then you can place it in there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"divi-image-hover-module\">Divi Image Hover Plugin<\/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 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>If you really want to take your custom image overlays to the next level then the plugin <a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=78591\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Divi Image Hover Module<\/a> is something you want to look into.<\/p>\n\n\n\n<p>Divi Image Hover is the ultimate plugin for creating custom image overlays with ease. It gives you 250+ custom animation options across 6 different categories of effects to choose from, making it the most versatile and feature-rich image module on the market.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Swap images<\/h3>\n\n\n\n<p>Swap images are a great way to customize your website and make it look more attractive to visitors. With a number of different effects available, you can easily design custom image overlays for an engaging user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">58+ hover effects<\/h3>\n\n\n\n<p>With 58+ effects available, you can easily customize your image overlays for greater appeal. From classic fade-ins and wipe effects to slideshows and 3D transformations, you have plenty of options to choose from when crafting the perfect custom <a href=\"https:\/\/www.markhendriksen.com\/divi-hover-effects\/\">Divi hover effect<\/a>.&nbsp;<\/p>\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\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Creating an engaging Divi image overlay design is easier than you might think! With a little bit of creativity and the right tools, you can easily create a stunning overlay image that will keep your visitors engaged with your site.<\/p>\n\n\n\n<p>Thanks for following along with this tutorial. I hope you found it helpful and please feel free to share it with anyone who might need it.<\/p>\n\n\n\n<p>Do you have any questions or comments about creating an engaging Divi image overlay? Let me know in the comments below!<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\">\n<li><a href=\"https:\/\/www.markhendriksen.com\/wordpress-speed-optimization-guide\/\">How To Speed Up Your Divi Website (Guide)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">How to Make a Divi Child Theme<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">How to Make a Website With Divi Theme in 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-plugins\/\">The Best Divi Plugins For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/best-divi-child-themes\/\">The Best Divi Child Themes For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/10-divi-woocommerce-layouts\/\">The Best Divi WooCommerce Layouts For 2024<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.markhendriksen.com\/how-to-choose-the-best-hosting-for-your-divi-website\/\">How To Choose The Best Divi Hosting In 2024<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create an engaging Divi image overlay that will keep your visitors interested in your site. This tutorial covers everything you need to know! Are you looking to make your Divi website stand out against the competition? One of the best ways to do that is with image overlays\u2014a background image combined with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":28273,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-28230","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 Create a Divi Image Overlay | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.\" \/>\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\/how-to-create-a-divi-image-overlay\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Divi Image Overlay | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\" \/>\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-01-29T06:32:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-29T06:32:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.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=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Create a Divi Image Overlay\",\"datePublished\":\"2023-01-29T06:32:21+00:00\",\"dateModified\":\"2023-01-29T06:32:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\"},\"wordCount\":1213,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\",\"name\":\"How to Create a Divi Image Overlay | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg\",\"datePublished\":\"2023-01-29T06:32:21+00:00\",\"dateModified\":\"2023-01-29T06:32:23+00:00\",\"description\":\"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi image overlay\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#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 a Divi Image Overlay\"}]},{\"@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 Create a Divi Image Overlay | MarkHendriksen.com","description":"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.","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\/how-to-create-a-divi-image-overlay\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Divi Image Overlay | MarkHendriksen.com","og_description":"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.","og_url":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-01-29T06:32:21+00:00","article_modified_time":"2023-01-29T06:32:23+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Create a Divi Image Overlay","datePublished":"2023-01-29T06:32:21+00:00","dateModified":"2023-01-29T06:32:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/"},"wordCount":1213,"commentCount":4,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/","url":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/","name":"How to Create a Divi Image Overlay | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg","datePublished":"2023-01-29T06:32:21+00:00","dateModified":"2023-01-29T06:32:23+00:00","description":"Learn how to easily create a Divi image overlay for your website using this simple step-by-step tutorial.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/Divi-image-overlay.jpg","width":720,"height":400,"caption":"Divi image overlay"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-create-a-divi-image-overlay\/#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 a Divi Image Overlay"}]},{"@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\/28230","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=28230"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/28230\/revisions"}],"predecessor-version":[{"id":28790,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/28230\/revisions\/28790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/28273"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=28230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=28230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=28230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}