Sonar Effect for Divi Blurb Module

by | Jun 9, 2016 | 32 comments

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!

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

/*Code updated on June 12, 2016. Now it works without enabling 
blurb circle in the Blurb Module General Settings*/

.et_pb_blurb_content:hover {
   cursor: pointer !important;
}
.sonarEffect .et-pb-icon {
   border-radius: 100%;
   position: relative;
}
.sonarEffect .et-pb-icon:after {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 100%;
   content:'';
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
}
.sonarEffect .et-pb-icon:after {
   top: 0;
   left: 0;
}
.sonarEffect .et-pb-icon:hover {
   color: #fff;
}
.sonarEffect .et_pb_blurb_content:hover .et-pb-icon:after {
   -webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
   -o-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;
   }
}

I implemented this effect in my premium child theme One Pager, it features 4 pre-made sonar effects and provides the ability to fully customize the sonar effect (change colors, animation duration, iteration) using Customizer settings built in the child theme. Feel free to check it out and see how it looks and if you like it you can purchase it on Elegantmarketplace.com.

That’s it! Hope you will find this snippet useful.

Please feel free to share your thoughts and suggestions below.

Pin It on Pinterest

Shares