Create Better Divi Headers

Sonar Effect for Divi Blurb Module

by | Jun 9, 2016 | 43 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!

… 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.

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!