Customized blurb module layouts you can copy/paste into your Divi website.

The blurb module has always been popular and with a little extra custom CSS added to your theme options,
page options or child theme you can create some cool hover effects to add a little extra eye candy for your viewer. Below you will find examples for each blurb along with the CSS code required to achieve the hover effects (and any settings in the blurb you may need).

This is a default blurb

This blurb is fresh out of the Divi box and has no customization added. It’s kind of boring huh!

INSTRUCTIONS FOR USE;
1. Add a blurb module to your pageĀ 
2. In the advanced settings as a css class for the blurb you want to use (blurb-1)
3. Copy the CSS for the blurb you are using and add to your pages custom css, your theme options custom css or your style.css in your child theme.

Divi Blurb 1

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 1

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 1 ** */
/* ************************** */

.blurb-1,
.blurb-1 h4,
.blurb-1 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-1:hover {
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blurb-1:hover h4,
.blurb-1:hover .et-pb-icon {
    color: #7e57c0!important;
}

Divi Blurb 2

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 2

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 2 ** */
/* ************************** */

.blurb-2,
.blurb-2 .et-pb-icon {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.blurb-2:hover {
    -webkit-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    background-color: #fff;
}
.blurb-2:hover .et-pb-icon {
    -webkit-transform: scale(1.2) rotate(360deg);
    transform: scale(1.2) rotate(360deg);
}
Q

Divi Blurb 3

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Q

Divi Blurb 3

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 3 ** */
/* ************************** */

.blurb-3,
.blurb-3 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-3:hover {
    -moz-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.1);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.blurb-3:hover .et-pb-icon {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

Divi Blurb 4

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 4

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 4 ** */
/* ************************** */

.blurb-4,
.blurb-4 .et-pb-icon,
.blurb-4 h4 {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-4:hover {
    background-color: #ece6f5;
}
.blurb-4:hover .et-pb-icon,
.blurb-4:hover h4 {
    color: #7e57c0!important;
}
Q

Divi Blurb 5

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Q

Divi Blurb 5

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 5 ** */
/* ************************** */

.blurb-5,
.blurb-5 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-5:hover {
    transform: translateY(10px);
}
.blurb-5:hover .et-pb-icon {
    transform: translateY(10px);
}

Divi Blurb 6

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 6

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 6 ** */
/* ************************** */

.blurb-6,
.blurb-6 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-6:hover {
    transform: translateY(-20px);
}
.blurb-6:hover .et-pb-icon {
    transform: translateY(-50px);
}

Divi Blurb 7

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 7

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 7 ** */
/* ************************** */

.blurb-7 {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}
.blurb-7:hover {
    transform: translateY(-20px);
}
.blurb-7:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 10px;
    width: 0;
    transition: width 0s ease, background .5s ease;
}
.blurb-7:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 10px;
    width: 0;
    background: #ece6f5;
    transition: width .5s ease;
}
.blurb-7:hover:before {
    width: 100%;
    background: #ece6f5;
    transition: width .5s ease;
}
.blurb-7:hover:after {
    width: 100%;
    background: transparent;
    transition: all 0s ease;
}

Divi Blurb 8

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Divi Blurb 8

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Blurb Settings: Set the Design > Circle Icon: yes and Circle Color: #ece6f5

/* ************************** */
/* ** CSS FOR DIVI BLURB 8 ** */
/* ************************** */

.blurb-8 {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
.blurb-8:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0;
    background: #ece6f5;
    height: 100%;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
}
.blurb-8:hover:before {
    left: 0;
    right: 0;
}
Q

Divi Blurb 9

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

Q

Divi Blurb 9

Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.

/* ************************** */
/* ** CSS FOR DIVI BLURB 9 ** */
/* ************************** */

.blurb-9, .blurb-9 .et-pb-icon {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.blurb-9 .et-pb-icon {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

.blurb-9:hover {
    -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.blurb-9:hover .et-pb-icon{
  -webkit-filter: blur(0px);
  filter: blur(0px);
}

Comments

comments

Divi Freebies

Do you want some Divi FREEBIES?

Join our mailing list to receive the latest news, reviews, examples andĀ Divi Theme FREEBIES.

You have Successfully Subscribed!

Pin It on Pinterest