Sonar Effect for Divi Blurb Module

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

/* Add Sonar Hover Effect to Blurb Module */
.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;
    box-sizing: content-box;
}
.sonarEffect .et-pb-icon:after {
    top: 0;
    left: 0;
}
.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.

Pin It on Pinterest

Shares
Share This