In this Divi tutorial we are going to show you how to create a cool hover effect on your Divi Modules with a little custom CSS.
This hover effect will simply enlarge the module and give it a box shadow when you mouse over it. We use this on the Testimonial Module and Blurb Module but using this same method, you will be able to do this in just about any other module as well.
You can check out the demo page here.
Lets Get Started
1. Open up your testimonial module or your blurb module and assign the following Custom CSS Class in the module settings:Â gq-module-hover
The Magic of CSS
Now lets start to dazzle things up a bit with some CSS.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
/*------------------------------------------------*/
/*-------------[TESTIMONIAL HOVER]----------------*/
/*--------------[BY GENO QUIROZ]------------------*/
/*------------------------------------------------*/
/* testimonials */
.gq-module-hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
-webkit-transition: all 0.6s;
transition: all 0.6s;}
.gq-module-hover:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
z-index: 1;}
/*------------------------------------------------*/
Notes
The first rule is before you hover and the second rule is after you hover. If you want to play around with the shadow depth & shadow colors before and after hovers, just adjust the “box-shadow” elements.
And that’s it! Have fun!
Well that’s all for now. I hope you find this article useful.
Very cool, Geno. http://www.philsimon.com/books
Couldn’t resist.
Are this features available on DIVI SWITCH?
Im not sure Mohammad. I have not checked 🙂
It’s great. I translated it into Polish on my website http://divi.iterio.pl/tutoriale/divi-animacja-modulu-po-najechaniu-kursora/
That is awesome! Thank you!
Hi Geno, Thank you! Jerry told me you where working on it (-:
You bet Tobias. Thanks for the kind review 🙂
Cool, thank you very much!
Glad you like it! Thanks for visiting!
Hey Geno! Love this! I tried to add this to a blurb module and I can’t get it to work. Can you think of any reason why this wouldn’t work in a blurb module? Thanks!
Hi Christine! I just tested in on a blurb module and it worked for me. I would double check the tutorial steps, and also check for other classes/effects that could conflict with this one.
Hi Geno, this is great, just what I needed 🙂
I have a problem here – http://hannahsellstea.co.uk.gridhosted.co.uk/our-stockists/
The modules on the far right have their right hand edge cut off?
What’s the issue?
Figured it out…..it doesn’t play well with the equalize column height setting for some reason.
That is an interesting find, thank you for letting us know.
If you’d like to try another method, our friend SJ James has just released a tutorial on another way to make items the same height. Here is the link: https://divi.space/blog/why-is-it-so-hard-to-vertical-align-stuff-not-anymore/
Hi,
I’ve experienced some problems when using these tutorials (which are awesome, by the way). Sometimes they only work if they’re put in the Custom CSS box in Divi theme options, but they don’t work when put in my child theme’s stylesheet. This is the case with this particular tutorial, but I’m fairly sure that some of the codes in my stylesheet do work, though.
Is there a simple reason why this would be happening?
Thanks for the tutorials!
Tim
Hi Tim! The reason this can happen is the order that things are loaded, and possibly conflicting CSS elsewhere. If you view the source of your page you can see that the last CSS implemented is the code in from the Custom CSS box in Divi’s Theme Options. Since that Custom CSS box is executed last, it kind of has the final say on the styling of the page.
Hi Jerry, thanks for the response. How would I get around this… by moving all the code from the Custom CSS box into the stylesheet so nothing conflicts?
This particular tutorial has very limited code but it can be applied to any module so it is hard to say what could be conflicting.
If you want to troubleshoot, you can try applying the CSS class to different module types to see if it works. If it works on other modules, then you can look through the style.css file for anything that applies to the type of module you are wanting this effect on.
Very nice tweak! Thank you so much for sharing Geno and Jerry!
How do you make it so that they are responsive? I used this code but the modules overlap.
Hello Eden! The modules should be responsive automatically since we are using the standard modules in Divi. If you provide a link to your site we might be able to see what is causing this issue for you.
Really nice effect but I think the box-shadow needs toning down.
Thanks Adam! Feel free to adjust the box-shadow however you’d like. 😉
Hi, than you for this tick, i have a problem with my left and right element, not see all effect, this my code now, only include position relative, ty dude!!
/* servicios */
.gq-module-hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0);
-webkit-transition: all 0.6s;
transition: all 0.6s;}
.gq-module-hover:hover {
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
z-index: 1;
position: relative;}
/*————————————————*/
sorry, web is:
http://valero.modoprueba.es/
ty
Hi Luis! What you need to do is apply some left and right padding to the Row. I would suggest assigning a class to that row so that you can target it specifically. But this CSS will show you the concept…
.et_pb_gutters2.et_pb_row.et_pb_row_fullwidth { padding-left: 20px; padding-right: 20px; }thank you!!!
I found this would only work in the divii theme options too, not child theme style sheet
Great! I’ve used the code in columns of a row and he is working. Thanks for the super idea!
Awesome!
I cannot seem to get this or the hamburger menu tutorial working. I have updated everything and tried everything. Is there something new?
Hi Scott. Nothing new has been added. Are you adding the css to the Divi Theme Options Custom CSS box?
Added this to my home page and it is easy to set up and is awesome to look at
Thanks for solution. It’s really nice.
However, when I’m looking on my page on IE – it shakes instead of smoothy appear. Do you have a solution for it?
Here’s my page: http://identifyprojects.com/aylesbury/
IE is always the browser to keep up with standards. You can try speeding up the animation.
Geno, thanks, thanks and a big thanks! 🙂
It’s really cool effect!
I’m using this snippet to a four-column row and it works! And I use an another snippet in that row.
First the full effect of the left and right elements ‘s seen missed but I fixed it the left and right padding of row.
So Geno, you’re great! 🙂 And now my site looks like nice, too.
Awesome. Thanks for taking the time to share Boyafa 😀
Hi Geno, thank you, it is nice effect. How to add the icon of the hand? you know what I mean? Now it shows the arrow icon outside the image and when you hover over it. It would be nice to show the hand icon when you hover over it!
You can add this element to the hover class cursor: pointer;
This is making my whole portfollio zoom instead of each thumbnail inside the portfollio any ideas whats going on?
Did you apply the class in the right place?
Hi, I know this is an old post but I hope you can still help me. So I am using this to make 4 images in a row to pop out individually when you hover over them. Only issue is that each one overlaps the image to it’s left but not the one to the right, which is what I would like for it to do as well. I hope you can help me!
Hy, how can i use it with grid blog module?
Hi Geno & Jerry. Love this so thank you. The effect seems to be negated if an animation is applied. Is there a way for them to play nicely together?
I would have to see an example. Do you have a link?
Hey there! Is there a way to make the hover rounded? The photos in my module have rounded corners. (On our site it’s where countries are listed)
Do you have a link you could share?