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;
box-shadow:
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;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
Build Beautiful.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Thanks! This tip worked great, and was very easy to customize for the color scheme on a new site I’m designing now.
Glad it helped!
This was fantastic, thank you so much!
If you by chance know a way to add a drop shadow like this that would be awesome to do as well.
(it’s the profile picture for the “fiber”)
http://googlefiberblog.blogspot.com/2016/04/1billiontimesfaster.html
if you look to the right sidebar you’ll see the profile pic. It’s a blue circle with “fiber” and a cool unique designed shadow, do you think it’s possible to edit the css to get a shadow to drop on hover with that?
Hey, glad it helped.
That google fiber deal is an image : https://lh4.googleusercontent.com/-UfnKaj_9Aa4/AAAAAAAAAAI/AAAAAAAAPOI/rnJ6glq9dkg/photo.jpg?sz=85
You’ve saved a life with your tutorial, thanks.
LOL! Perhaps I should change my tagline…Orange Pulley, Saving One Life at a Time. 🙂 Glad it helped.
Hi! thank for the nice hover! Is there a way that the blurb remain clickable?
thank you!
Hey, Roney. I have a working example here that is still clickable:
http://orangepulleyllc.com/
It uses the same code, or, at least, I hope it does!
Nice hover effect. works great! thanks. Is there a way to assign different colors for each blurb icon?
Steve – you can control the initial colors within the blurb module and the hover by modifying this CSS line:
background-color: #F1B12D !important;
Change the hex value to your desired color.
HTH.
Hi Logan, thanks I got that, but as the css is in the Divi’s custom css it affects every blurb icon on my website. I’m trying to do the same hover effect for everyone but each one in different colors. Did I maybe misunderstand you? Thanks for your help!
Gotcha. In that case, I’d assign each blurb a CSS class and then prepend that class to the CSS.
So, for example, I’d add something like “custom-blurb-blue” to the CSS CLASS section of the blurb module and then this should work:
.custom-blurb-blue .et-pb-icon { css }
.custom-blurb-blue .et-pb-icon:hover {css}
You can avoid duplication by just moving, say, the color to the specific one and leave the others as is.
Perfect. Worked out just fine. Thank you Logan, you’re awesome!!!
Very welcome. To quote the most interesting man in the world, “Stay thirsty, my friend.” 🙂
Hi, thanks for the tutorial, but I dont understand in which part starts the customization zone for introduce the new code, in my Divi CSS code said it:
/*
Theme Name: Divi
Theme URI: http://www.elegantthemes.com/gallery/divi/
Version: 2.7
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Tags: responsive-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, featured-images, full-width-template, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready
License: GNU General Public License v2
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Browser Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend {
Hi. Looks like the parent theme (themes/Divi/style.css).
Have you installed a child theme?
https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial
To answer your question directly, you can add “Custom CSS” anywhere in a CSS file. It does ‘cascade’ though so be cautious of where you put it.
If you don’t want to setup a child theme, you can try this plugin: https://wordpress.org/plugins/simple-custom-css/
You can add custom CSS from the Divi Menu
Very cool Logan, thank you. I’m curious, if I wanted the entire blurb (block) to be a hover over, what would that css look like???
Thanks again!
Hi, Scott. You should be able to use the class for the entire blurb, not just the icon. Inspect the URL and find the blurb. If you post a URL, I’ll take a look. Thanks!
Great advice Logan. I’ve just started to mess with CSS inside Divi. I created a custom class because this also affects the “scroll down button” in the Fullwidth header module. So now i can apply it wherever I want.
Thanks