Sonar Effect for Divi Blurb Module
In this short tutorial I am going to show you how to implement a nice sonar hover effect to blurbs on your Divi website. It looks really awesome and can be done in just two simple steps. Check out the end result and if you like it, go ahead with the two short steps below. Enjoy!
This is what we get…
Hover Me!
Hover Me!
… and this is how we do it
STEP 1:
Add sonarEffect in the Blurb Module Settings -> Custom CSS
STEP 2:
Add the following css code 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! Hope you will find this snippet useful.
Please feel free to share your thoughts and suggestions 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.