I set out to add a neat hover animation on the blurb modules throughout a site.  I usually create my own classes and apply them individually, which has become way easier now to re-use with Divi’s Global Modules, but for this site I just used the default et-pb-icon class.

Here is the video on doing it:


And the CSS:

.et-pb-icon {
 border-radius: 50%;
 overflow: hidden;
 position: relative;
 cursor: default;
 inset 0 0 0 6px rgba(255,255,255,0.6),
 0 1px 2px rgba(0,0,0,0.1);
 transition: all 0.4s ease-in-out;
.et-pb-icon:hover {
 color: #666 !important;
 background-color: #F1B12D !important;
 -webkit-transition-duration: 350ms; /* Safari */
 -moz-transition-duration: 350ms; /* Safari */
 -ms-transition-duration: 350ms; /* Safari */
 transition-duration: 350ms;
 inset 0 0 0 1px rgba(255,255,255,0.1),
 0 1px 2px rgba(0,0,0,0.1);

Build Beautiful.