Customized blurb module layouts you can copy/paste into your Divi website.
The blurb module has always been one of the most popular Divi modules 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;
- Add a blurb module to your page
- In the advanced settings as a CSS class for the blurb you want to use (blurb-1)
- 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. (Learn how to add CSS in Divi)
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);
}
Divi Blurb 3
Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.
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;
}
Divi Blurb 5
Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.
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;
}
Divi Blurb 9
Free Divi blurb hover effects from Divi Theme Examples you can just copy and paste into your next Divi website.
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);
}
Great blurb examples. a big thank you for sharing these delicious examples. Keep up the great coding. I will use these in my designs.
thanks 🙂
Hi,
Please let me know how can i replace custom icon in this code.
the icons are set in the blurb module settings
I was trying to change the color code but when i change it hover effect is not working.
Hi I can’t get it to hover properly it doesn’t seem to work for me
do you mean in the demo above, or on your site? if your site, whats the url?
I’ve been having difficulties in all my attempted animations using custom CSS and divi. No animations seem to want to play out and they transition instantly. That includes these code example. I’ve been wracking my brain for a day trying to figure out why and still am not sure.
Hi I have removed the class from the blurbs at the moment but when you hover it hides behind the next one and z-index does nothing
the hover zoom is going over the adjoining squares when i look at it
Hi thanks I added your blurb-3 to all the blurbs that have links so you can see better, the hover goes behind the next one excet for the odd one like the last one goes over the top of the ones beside it. Do you have any suggestions on how to make it behave? Is it because it is a five column row? Thanks
I’m having trouble with blurb-7 design. It seems to be working perfectly fine in the divi visual builder view but if I preview the page in live the bottom border is appearing at the bottom of the section instead of the bottom of the blurbs. Do you know why that is?
did you add the class in the right place? post a link and maby someone can help
hi there, im using the blurd-3 and it looks amazing ! but it doesnt work with one of the blurd bc im using a image instead a icon, so it doesnt scaled. Anything i can do to solve it. couldn’t find the icon that suits so i had to use a image instead. thanks Ludwim C
you need to swap the css targeting the icon to the image, so it would be;
.blurb-3,
.blurb-3 .et_pb_main_blurb_image {
-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_main_blurb_image {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
Hello 🙂 ! your advice are precious and i solve my problem ! But i want to delete the shadow around my icon. I want just the effect on my image not around ! (sorry for my english )
remove the code -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); it would be worth having a look at some basic css courses too as will help you a lot to understand. many free resources online to learn 🙂
thank you !
Thanks for this. These are awesome!
Hi,
Love the effects, thanks for that! How do I create the opposite effect for Blurb 8?
Regards, Chris
just swap the left/right values on before and after
blurb-8:before
left: 0;
right: 0;
blurb-8:hover:before
left: 50%;
right: 50%;
Hi Craig, it does not what I want yet. Here is my code.
I want the overlay to start on the sides, going to the middle. What am I missing?
Effects is working fine in the builder, but when try it live it live… effects on the icon doesnt work… what should i do?