{"id":33714,"date":"2024-05-08T06:25:49","date_gmt":"2024-05-08T04:25:49","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=33714"},"modified":"2024-05-08T06:25:51","modified_gmt":"2024-05-08T04:25:51","slug":"divi-blurb-hover-effects","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/","title":{"rendered":"Divi Blurb Hover Effects Tutorial: How to Create a Flip Card"},"content":{"rendered":"\n<p>In this tutorial, I will show you how to create a flip card hover effect using the Divi blurb module. <\/p>\n\n\n\n<p>This will add an engaging and visually appealing feature to any website for different uses.<\/p>\n\n\n<div class=\"gb-container gb-container-561e536c\">\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li><a href=\"#preview\">Preview of the finishing result<\/a><\/li>\n\n\n\n<li><a href=\"#tutorial\">Creating the Divi blurb hover flip card<\/a><\/li>\n\n\n\n<li><a href=\"#advanced\">Advanced techniques<\/a><\/li>\n\n\n\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ul>\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"preview\">Preview of the finishing result<\/h2>\n\n\n\n<p>After finishing this tutorial, you will have created a flip card hover effect using the Divi blurb module.<\/p>\n\n\n\n<p>You can view a live demo of what we are going to build here:<\/p>\n\n\n\n<a class=\"gb-button gb-button-bcad6e29 gb-button-text\" href=\"https:\/\/www.demo.markhendriksen.com\/divi-blurb-hover-effects\/\" target=\"_blank\" rel=\"noopener noreferrer\">See the Demo<\/a>\n\n\n\n<p>In the demo, when you hover over a Divi blurb module, it flips to reveal the background image and a button.<\/p>\n\n\n\n<p>Without further ado let&#8217;s get started with the tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tutorial\">Creating the Divi blurb hover flip card<\/h2>\n\n\n\n<p>I&#8217;ll guide you through the steps to create this hover effect for your Divi blurb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: settings for the row and column<\/h3>\n\n\n\n<p>We begin by setting up a row and selecting a structure with three columns.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Row settings<\/h4>\n\n\n\n<p>In the Design tab use the following settings:<\/p>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Sizing<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Enable the option <a href=\"https:\/\/www.markhendriksen.com\/how-to-equalize-column-heights-in-divi\/\">Equalize Column Heights<\/a><\/li>\n\n\n\n<li>Max-width: 1240px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings.jpg\" alt=\"Row settings\" class=\"wp-image-33716\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/row-settings-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Column settings<\/h4>\n\n\n\n<p>Open the first column, under the Content tab go to Background, and place a background image here.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column.jpg\" alt=\"\" class=\"wp-image-33717\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/background-image-in-the-column-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Design tab<\/h4>\n\n\n\n<p>Then go to the Design tab and use the following settings:<\/p>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Border<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Set a rounded border of 7px<\/li>\n\n\n\n<li>Use a top border of 6px width and set a border color<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border.jpg\" alt=\"\" class=\"wp-image-33718\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-column-border-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Box Shadow<\/strong><\/p>\n\n\n\n<p>I used the second default option, for the shadow color I use rgba(0,0,0,0.1).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column.jpg\" alt=\"\" class=\"wp-image-33719\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/set-a-box-shadow-for-the-column-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Now go to the Advanced tab and under CSS ID &amp; Classes &gt; CSS Class place this class in it: mh_flip<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class.jpg\" alt=\"\" class=\"wp-image-33720\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-the-CSS-class-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>You can leave the other two columns for now, we will duplicate those later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: blurb module<\/h3>\n\n\n\n<p>Place a Divi Blurb module in the first column.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Content Tab<\/h4>\n\n\n\n<p>In the Content tab fill in a title and description.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module.jpg\" alt=\"\" class=\"wp-image-33722\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Place-a-title-and-description-in-the-divi-blurb-module-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>Scroll a bit lower and place an image in the Image &amp; Icon tab.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module.jpg\" alt=\"\" class=\"wp-image-33721\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/place-an-image-in-the-blrub-module-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Design tab<\/h4>\n\n\n\n<p>In the Design tab use the following settings:<\/p>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Image &amp; Icon<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Image\/Icon Placement: Top<\/li>\n\n\n\n<li>Image \/Icon Placement: Center<\/li>\n\n\n\n<li>Image\/Icon Rounded Corners: 5px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings.jpg\" alt=\"\" class=\"wp-image-33723\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-image-settings-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Title Text<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Title Text Size: 24px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size.jpg\" alt=\"\" class=\"wp-image-33725\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Title-text-size-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Body Text<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Body Line Height: 1.6em<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height.jpg\" alt=\"\" class=\"wp-image-33724\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/body-line-height-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Spacing<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Margin-bottom: 0px<\/li>\n\n\n\n<li>Padding-left: 30px<\/li>\n\n\n\n<li>Padding-right: 30px<\/li>\n\n\n\n<li>Padding-bottom: 30px<\/li>\n\n\n\n<li>Padding-top: 30px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding.jpg\" alt=\"\" class=\"wp-image-33726\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Blurb-margin-and-padding-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Advanced tab<\/h4>\n\n\n\n<p>In the Advanced tab and under CSS ID &amp; Classes &gt; CSS Class place this class in it: mh_flip_active<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class.jpg\" alt=\"\" class=\"wp-image-33727\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/blurb-css-class-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: text module<\/h3>\n\n\n\n<p>Under the blurb module place a text module.<\/p>\n\n\n\n<p>Place the text Read More in the body field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module.jpg\" alt=\"\" class=\"wp-image-33728\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Read-more-text-in-text-module-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Background<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Go to the gradient tab to select your color<\/li>\n\n\n\n<li>Gradient Direction: 150deg<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color.jpg\" alt=\"\" class=\"wp-image-33729\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/gradient-background-color-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Design tab<\/h4>\n\n\n\n<p>In the Design tab use the following settings:<\/p>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Text<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Text Font Weight: Semi Bold<\/li>\n\n\n\n<li>Text Font Style: Uppercase<\/li>\n\n\n\n<li>Text Color: White<\/li>\n\n\n\n<li>Text Size: 16px<\/li>\n\n\n\n<li>Text Letter Spacing: 2px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module.jpg\" alt=\"\" class=\"wp-image-33730\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Text-settings-for-the-text-module-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p class=\"bold-text-above-list\"><strong>Spacing<\/strong><\/p>\n\n\n\n<ul class=\"listsquare-listsquare-single wp-block-list\">\n<li>Margin-bottom: 0px<\/li>\n\n\n\n<li>Padding-top: 20px<\/li>\n\n\n\n<li>Padding-bottom: 20px<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing.jpg\" alt=\"\" class=\"wp-image-33731\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/text-module-spacing-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Advanced tab<\/h4>\n\n\n\n<p>Go to the Advanced tab and place the following class: mh_flip_meta.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module.jpg\" alt=\"\" class=\"wp-image-33733\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/add-class-to-the-text-module-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: duplicate column<\/h3>\n\n\n\n<p>Open your row and delete columns 2 and 3.<\/p>\n\n\n\n<p>Then duplicate the first column 2 times.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"421\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns.jpg\" alt=\"\" class=\"wp-image-33734\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns-380x235.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns-300x186.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns-510x316.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns-97x60.jpg 97w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/delete-and-duplicate-columns-145x90.jpg 145w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: CSS code<\/h3>\n\n\n\n<p>Go to Divi &gt; Theme Options &gt; CSS and place the following CSS code in here.<\/p>\n\n\n\n<pre class=\"wp-block-code has-base-background-color has-background\" style=\"font-size:14px\"><code>.mh_flip .mh_flip_active, .mh_flip .mh_flip_meta, .et-fb .mh_flip .mh_flip_active, .et-fb .mh_flip .mh_flip_meta {\n    transform: perspective(500px) rotateX(0deg); \/* Default transform *\/\n    transition: all 0.3s linear;\n}\n\n.mh_flip .mh_flip_active {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    background-color: #fff;\n    padding: 40px 50px;\n    top: 0;\n    left: 0;\n    transform-origin: 50% 0%;\n    height: calc(100% - -1px);\n}\n\n.mh_flip:hover .mh_flip_active {\n    transform: perspective(500px) rotateX(-90deg);\n    transition-delay: 0s;\n}\n\n.mh_flip .mh_flip_meta {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background-color: #0e0e0e;\n    padding: 40px;\n    transform-origin: 50% 100%;\n    opacity: 0; \/* Hidden by default *\/\n    transition: all .3s linear; \/* Transition without delay *\/\n    transform: perspective(500px) rotateX(90deg); \/* Initial transform for hidden state *\/\n}\n\n.mh_flip:hover .mh_flip_meta {\n    opacity: 1; \/* Visible on hover *\/\n    transform: perspective(500px) rotateX(0deg); \/* Rotate to visible state on hover *\/\n    transition-delay: 0.2s; \/* Delay the start of transition to sync with .mh_flip_active *\/\n}\n\n.et-fb .mh_flip .mh_flip_active, .et-fb .mh_flip:hover .mh_flip_active, .et-fb .mh_flip .mh_flip_meta {\n    height: unset;\n    opacity: 1 !important; \/* Ensure it's visible *\/\n}\n\n.et-fb .mh_flip:hover .mh_flip_active {\n    transform: perspective(500px) rotateX(0deg);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advanced\">Advanced techniques<\/h2>\n\n\n\n<p>Here are some advanced techniques to have more control over the flip cards.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adjust the speed of the flip card<\/h3>\n\n\n\n<p>To change how quickly the flip card transitions, adjust the values in &#8220;transition: all 0.3s linear.&#8221;<\/p>\n\n\n\n<p>For a faster transition, change the &#8220;0.3s&#8221; to &#8220;0.1s.&#8221;<\/p>\n\n\n\n<p>In case you want a slower transition, you can change it to 0.5s<\/p>\n\n\n\n<p>You need to change this value in two spots: line 3 and line 34.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"854\" height=\"337\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition.jpg\" alt=\"\" class=\"wp-image-33736\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition.jpg 854w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-380x150.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-680x268.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-300x118.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-768x303.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-152x60.jpg 152w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/change-flip-card-speed-transition-228x90.jpg 228w\" sizes=\"(max-width: 854px) 100vw, 854px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Adjust the flip card direction<\/h3>\n\n\n\n<p>To change the flip card&#8217;s direction, simply add this CSS code below the original one.<\/p>\n\n\n\n<pre class=\"wp-block-code has-base-background-color has-background\" style=\"font-size:14px\"><code>\/* Change flip card direction *\/\n.mh_flip .mh_flip_active, .mh_flip .mh_flip_meta, .et-fb .mh_flip .mh_flip_active, .et-fb .mh_flip .mh_flip_meta {\n    transform: perspective(500px) rotateX(0deg); \/* Default transform for both elements *\/\n    transition: all 0.3s linear; \/* Default transition for both elements *\/\n}\n\n.mh_flip .mh_flip_active {\n    \/* Other properties remain unchanged *\/\n    transform-origin: 50% 0%;\n}\n\n.mh_flip:hover .mh_flip_active {\n    transform: perspective(500px) rotateY(-90deg); \/* Changed flip active to rotateY for horizontal flip *\/\n    transition: all 0.3s linear 0s; \/* Adjust duration here as well *\/\n}\n\n.mh_flip .mh_flip_meta {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    background-color: #0e0e0e;\n    padding: 40px;\n    transform-origin: 50% 100%;\n    opacity: 0; \/* Hidden by default *\/\n    transform: perspective(500px) rotateX(90deg); \/* Retain vertical flip *\/\n    transition: all 0.3s linear 0s; \n}\n\n.mh_flip:hover .mh_flip_meta {\n    opacity: 1; \/* Visible on hover *\/\n    transform: perspective(500px) rotateX(0deg); \/* Retain vertical flip *\/\n    \/* No additional transition-delay needed here because it's set in the default state *\/\n}\n\n.et-fb .mh_flip .mh_flip_active, .et-fb .mh_flip:hover .mh_flip_active, .et-fb .mh_flip .mh_flip_meta {\n    \/* Other properties remain unchanged *\/\n}\n\n.et-fb .mh_flip:hover .mh_flip_active {\n    transform: perspective(500px) rotateY(0deg); \/* Changed from rotateX to rotateY *\/\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>In this tutorial, you have learned how to create a flip card hover effect using the Divi blurb module. You can now use this technique to add an eye-catching feature to your website and make it stand out from the rest.<\/p>\n\n\n\n<p>Feel free to experiment with different settings and advanced techniques to customize the flip card even further.<\/p>\n\n\n\n<p>If you have any questions or suggestions, leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to create a flip card hover effect using the Divi blurb module. This will add an engaging and visually appealing feature to any website for different uses. Table of Contents Preview of the finishing result After finishing this tutorial, you will have created a flip card hover [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33759,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-33714","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>Create a Stunning Divi Blurb Hover Effect for Your Website<\/title>\n<meta name=\"description\" content=\"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.\" \/>\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-blurb-hover-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Stunning Divi Blurb Hover Effect for Your Website\" \/>\n<meta property=\"og:description\" content=\"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/divi-blurb-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=\"2024-05-08T04:25:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-08T04:25:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-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-blurb-hover-effects\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"Divi Blurb Hover Effects Tutorial: How to Create a Flip Card\",\"datePublished\":\"2024-05-08T04:25:49+00:00\",\"dateModified\":\"2024-05-08T04:25:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/\"},\"wordCount\":693,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/\",\"url\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/\",\"name\":\"Create a Stunning Divi Blurb Hover Effect for Your Website\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg\",\"datePublished\":\"2024-05-08T04:25:49+00:00\",\"dateModified\":\"2024-05-08T04:25:51+00:00\",\"description\":\"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg\",\"width\":720,\"height\":400,\"caption\":\"Divi Blurb Hover Effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/divi-blurb-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\":\"Divi Blurb Hover Effects Tutorial: How to Create a Flip Card\"}]},{\"@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":"Create a Stunning Divi Blurb Hover Effect for Your Website","description":"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.","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-blurb-hover-effects\/","og_locale":"en_US","og_type":"article","og_title":"Create a Stunning Divi Blurb Hover Effect for Your Website","og_description":"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.","og_url":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2024-05-08T04:25:49+00:00","article_modified_time":"2024-05-08T04:25:51+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-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-blurb-hover-effects\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"Divi Blurb Hover Effects Tutorial: How to Create a Flip Card","datePublished":"2024-05-08T04:25:49+00:00","dateModified":"2024-05-08T04:25:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/"},"wordCount":693,"commentCount":2,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/","url":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/","name":"Create a Stunning Divi Blurb Hover Effect for Your Website","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg","datePublished":"2024-05-08T04:25:49+00:00","dateModified":"2024-05-08T04:25:51+00:00","description":"Learn how to create hover effects with the Divi blurb. Step-by-step tutorial on how to create a flip card animation on your website.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/divi-blurb-hover-effects\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2024\/05\/Divi-Blurb-Hover-Effects.jpg","width":720,"height":400,"caption":"Divi Blurb Hover Effects"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/divi-blurb-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":"Divi Blurb Hover Effects Tutorial: How to Create a Flip Card"}]},{"@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\/33714","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=33714"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33714\/revisions"}],"predecessor-version":[{"id":33765,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/33714\/revisions\/33765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/33759"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=33714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=33714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=33714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}