In this simple tutorial I'll show how to implement a Divi Blurb module hover effect that I refer to as the sonar effect. The sonar hover effect creates a visually appealing result making the important content stand out and encouraging user interaction when the blurb is being hovered over.
Check out the demo and if you like it go ahead and implement it as explained in this tutorial.
Table of Contents
Sonar Effect Demo
Hover over the Blurb modules to see the effect in action.
Hover Me!
Hover Me!
To implement this effect follow the simple steps below.
Step 1: Add the CSS Class to Divi Blurb Module
Add the sonarEffect CSS class into the Blurb Module Settings -> Custom CSS -> CSS Class field.
Step 2: Add the Sonar Hover Effect custom CSS
Add the following CSS snippet to the Divi -> Theme Options -> Custom CSS.
/* Add Sonar Hover Effect to Blurb Module */
.et_pb_blurb_content:hover {
cursor: pointer !important;
}
.sonarEffect .et-pb-icon {
border-radius: 100%;
position: relative;
overflow: visible !important;
}
.sonarEffect .et-pb-icon:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
content:'';
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.sonarEffect .et_pb_blurb_content:hover .et-pb-icon:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
animation: sonarEffect 1.3s ease-out 75ms;
}
@-webkit-keyframes sonarEffect {
0% {
opacity: 0.3;
-webkit-box-shadow: 0 0 0 2px rgba(53,186,242, 0), 0 0 10px 10px rgba(53,186,242, 0), 0 0 0 10px rgba(53,186,242, 0);
}
40% {
opacity: 0.5;
-webkit-box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
-webkit-box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
@-moz-keyframes sonarEffect {
0% {
opacity: 0.3;
-moz-box-shadow: 0 0 0 2px rgba(53,186,242, 0), 0 0 10px 10px rgba(53,186,242, 0), 0 0 0 10px rgba(53,186,242, 0);
}
40% {
opacity: 0.5;
-moz-box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
-moz-box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.5);
opacity: 0;
}
}
@keyframes sonarEffect {
0% {
opacity: 0.3;
box-shadow: 0 0 0 2px rgba(53,186,242, 0), 0 0 10px 10px rgba(53,186,242, 0), 0 0 0 10px rgba(53,186,242, 0);
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(53,186,242, 0.1), 0 0 10px 10px #35BAF2, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
/* End */
That's it! Once you've saved everything, this eye-catching hover effect will be added to the Blurb module!
I hope you find this snippet helpful and enjoy using the effect in your Divi projects. I think it's a nice addition to your personal library of Divi Blurb hover effects, and I'd love to hear your thoughts and suggestions in the comments section below.
Hi Ivan,
The effect is not working anymore, even the example on this page.
Is there any css fix?
Thank you!
Hi Ahmed.
Thanks for the heads up. This issue can be fixed by setting the
overflow: visible;rule for the.et-pb-iconelement like so:.sonarEffect .et-pb-icon {border-radius: 100%;
position: relative;
overflow: visible !important;
}
I have modified the CSS accordingly.
Hi Ivan. My previous comment have been removed.. So, followed all the steps from tutorial and.. i’ve got little problem. Sonar effect is not round. Please have a look. pdfcrosswords.com . Can you help?
Hi Remik.
That’s an overflow issue. The blurb icon wrapper
overflowis set tohidden, change it tovisible:.et_pb_image_wrap {overflow: visible;
}
And also the Row
overflowishidden, change it to visible in Row Settings.P.S. your previous comment is not removed, it just was not approved yet.
Works perfect. Thank you ;)
Hi Ivan. Why i’ve got this box effect on hovering? pdfcrosswords.com.
Regards
Remik
Is thier a way to have this same effect on a image module?
Hi Mona.
It would require a different approach (using JS maybe) to applly this effect to an image since this effect makes use of pseudo element (:after) which cannot be used with so called replaced elements(in this case
img).Yes, you are right ;).. Could be nice to read any tutorial with nice animation for toggle module in Divi..
Hi Ivan. Great tutorial, but it doesn works on mobile devices.. I mean sonar effect.
Regards
Remik
Hi Remik.
It works if you tap on the blurb on mobile devices. This is a hover effect and any hover effect makes no sense for mobile devices since you don’t use a cursor for hovering over but rather tap with your fingers to navigate through the site.
Hi Ivan,
Thank you so much for sharing this code. I have a question, how could I make the Icon change color together with the Sonar effect?
Hi Dalton. Sorry for late reply. To change the icon color together with the sonar effect use this CSS snippet:
.sonarEffect2 .et_pb_blurb_content:hover .et-pb-icon {color: red; /* set icon color here */
}
Hello, I installed this effect and it works properly.
How can I change the color of the sonar effect? I like it to match my website.
Hello Arun. Find the
rgba()color inkeyframes( namely thergba(53,186,242, 0.1)andrgba(53,186,242, 0)) and change it’s first three values (the forth one is opacity, leave it as it is) to match your site’s color scheme.Nice tweak Ivan.
But unfortunately it doesn’t work for a custom image icon. And that’s the case most of the times as the fa icons are looking extremely generic for some topics.
I love this effect. Thank you Ivan Chi.
How I do I use it, when I use an uploaded image in the blurb?
Another question , i woul dlike to use your effect as well here see the house with the icons ?
Do you have any idea how they did this?
I think its a background with positioned icons there i want to use ur effect , thats also something cool people may intrested in besides me.
wibutler.com
Hello Sir , how can i make your effect shopwing continously without mouseovering?
Regards from germany
Hi Denis.
Replace the code on lines 028 to 033 with this snippet:
.sonarEffect .et_pb_blurb_content .et-pb-icon:after {-webkit-animation: sonarEffect 1.3s infinite ease-out 75ms;
-moz-animation: sonarEffect 1.3s infinite ease-out 75ms;
-o-animation: sonarEffect 1.3s infinite ease-out 75ms;
animation: sonarEffect 1.3s infinite ease-out 75ms;
}
It will make sonar effect run continuously.
Worked perfectly.
Well we found a bug on IE the effect isn’t working in any internet explorer :( can you help?
Updated the code, now it works in Edge and IE11, didn’t test with other versions of IE. Updated part is keyframes, if you’ve already modified the code preceding keyframes and don’t want to lose changes just replace code starting with the line 034 and till the end.
Hi Ivan, can we make the same effect for image instead of icon?
Hi, Alp.
Yes, it is possible, but you’ll have to change CSS selectors accordingly.
Hi Ivan,
What is the correct CSS selector if you want to achieve the same effect on an image? I’ve been trying to figure it out without any luck.
Sorry, my bad. Actually it won’t work if you simply target the blurb image because pseudo elements do not work with the
imgtag. One of the possible solutions would be wrapping theimgtag with aspanusing jQuery.wrap()function and then replace the.et_pb_iconwith the.et_pb_main_blurb_image > spanin the CSS snippet provided in this post. Also you’ll need to specify thewidthandheightofspanaccording to image dimentions.Thanks Ivan.
Awesome mate, thanks for sharing
Thanks, Mario. More awesome tuts coming soon ;)
Thanks for sharing the code Thank You so much .
I have aaplied the code but its not working in continous way!
Hi, vipin.
For the effect to run continuously all you have to do is to add the word “infinite” for animation iteration count like this:
.sonarEffect .et_pb_blurb_content:hover .et-pb-icon:after {-webkit-animation: sonarEffect 1.3s infinite ease-out 75ms;
-moz-animation: sonarEffect 1.3s infinite ease-out 75ms;
-o-animation: sonarEffect 1.3s infinite ease-out 75ms;
animation: sonarEffect 1.3s infinite ease-out 75ms;
}
Try this, it should work fine. Let me know if it worked for you. Thanks.
Love this! Thanks!
Thanks for your comment, Anthony. I am glad you love it :)
Hi Ivan,
with the new code it worked now on my page. That’s such a nice gimmick and looks fabulous!!
Thanks a lot!!
Hi Karin,
thank you for letting me know, I am glad it worked for you. More such tutorials coming soon :)
Looks pretty cool, but doesn’t work @ my site.
Hi, Dick. Thank you for your comment. You had to enable the blurb circle in the General Settings, that’s why it didn’t work. But I updated the code so that now it works without enabling the blurb circle. Please try again and let me know if it worked for you.
Copied and pasted exact code, and not getting results any ideas or special tricks?
Did you adjust the code from the June 9th to today. I couldn’t get it to work on then and tried copying just the code today and it worked today. Strange.
This is a great effect!
Hi, Travis.
Happy to know that it worked for you. Yes, I have been making minor updates to the code since June 9, and today I updated it again so that there is no need to enable the blurb circle anymore, the code works both with or without blurb circle.
Hi Ivan,
It’s a nice effect. Thanks for sharing.
It may have missed your notice, in Step 1, it is written as:
“Add .sonarEffect in the Blurb Module Settings -> Custom CSS”
The dot in front of “sonarEffect” is not required.
Another query, is it possible to make the effect pulsating?
Thanks.
Hi, Manas.
Yes, you are right, no need for dot there, I removed it. Thanks.
For pulsating add these lines after line 032 before the closing curly brace ‘}’:
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
it will make the animation repeat infinitely, or you can change it to any number you like. Hope this will be helpful.