Do you want to make your Divi Blurb Module Images stand out a bit? Why not add a cool hover effect like zoom and rotate on hover. Its easier than you think.
You can see it in action on Landscapes, A Premium Divi Child Theme.
Click here to see live demo
Lets Get Started On The Divi Blurb Module
1. Create a new section and add the blurb module.
2. In the module’s General Settings, upload the image you want to use.
3. In the module’s Custom CSS tab, give the module the following CSS Class: gq-blurb-hover
4. Select Save & Exit and Update the page.
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)
Add this CSS.
/*------------------------------------------------*/
/*---------[GQ - CUSTOM BLURB HOVER]--------------*/
/*------------------------------------------------*/
@media only screen and (min-width : 767px) {
.gq-blurb-hover .et_pb_main_blurb_image {
position: relative;
overflow: hidden;}
.gq-blurb-hover img.et-waypoint {
margin-bottom: -5px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale(.99);
transform: scale(.99);}
.gq-blurb-hover img.et-waypoint:hover {
-webkit-transform: scale(1.11) rotate(2deg);
transform: scale(1.11) rotate(2deg);}
}
This code has been designed to work on screens larger that 767px so that it does not ruin the mobile experience. Since mobile users dont have the option to hover and they can only touch, it pretty much renders the effect useless anyways. But you can always change this code if you want it to work on smaller devices.
If you want it to zoom out on hover instead of zoom in, just switch these numbers
If you want to remove the rotation just remove this code
And that’s it! Have fun!
Well that’s all for now. I hope you find this article useful.
Wow, great tutorial, Geno! I find it so awesome that you turn the principles and features of your website designs into helpful tutorials for the community. Keep teaching and keep preaching, Geno!
Thanks Jeremy 🙂
Great tutorials…. thnx… plz make some more tutorials for image hover & animation effects… Thnx ones again…. Keep it up…
Thanks for this – so easy and a great effect 🙂
Hi Geno,
Which plugin are you using for the post footer donation option? I like the way you built it. Is there any plugin lets you do that or is it something you build on your own?
I use the Give plugin and used css to customize it. https://givewp.com/
Hi Geno! I am so happy to have found your blog! Thanks for sharing your knowledge! I was wondering if there is way to make the entire blurb animate without an image? I am using the blurb module only with an icon no image an I would like the blurb to zoom in on hover.
It can be done. I will add it to my long list of things to try 🙂
You are awesome! Def gna buy u a cuppa when i get paid for my current project! I used quite a few of your tutorials to get it done so I owe u 🙂
Hi Geno! How I can change image on hover? It’s possible?
This is possible. If you have already completed the tutorial you only need to add one line of code to the CSS to change the image on hover.
The last section of the CSS has the following line:
.gq-blurb-hover img.et-waypoint:hover {
Add this line right below that:
content: url('http://i2.wp.com/quiroz.co/wp-content/uploads/2014/05/HOME-OF-THE-ORIGINAL.png');
The final section should now look like this:
.gq-blurb-hover img.et-waypoint:hover {
content: url('http://i2.wp.com/quiroz.co/wp-content/uploads/2014/05/HOME-OF-THE-ORIGINAL.png');
-webkit-transform: scale(1.11) rotate(2deg);
transform: scale(1.11) rotate(2deg);}
}
You can replace that content url with the address to your image. Happy coding!
OH YES! Thank’s. it’s work, but is general, how i can change any blurb for a diferent image?
You’re right, I should have caught that. Apologies! Ok, to change the image for a particular blurb module you need to go edit the page where your blub is and assign a CSS ID in the Blurb module settings. For example: your-css-id
Once you have done that you can update the CSS. First remove the “content: url” line that you added before, and then add the following code…
#your-css-id.gq-blurb-hover img.et-waypoint:hover {
content: url('http://i2.wp.com/quiroz.co/wp-content/uploads/2014/05/HOME-OF-THE-ORIGINAL.png'); }
Repeat that process for each Blurb: Assign a CSS ID, add this code and replace “your-css-id” with each module’s CSS ID.
Happy coding!
Ok! Thanks! It’s work!
Hi Geno,
This is great, thank you! Is there a way to do the same for portfolio and filterable portfolio thumbnails?
Thanks,
Tim
Yes you can. Here is a tutorial to do just that: https://quiroz.co/divi-portfolio-grid-hover-animations-larger-images/
That was pretty sweet thanks
Any chance you have a tutorial for how you created the hover over buttons at the bottom? (recent projects)
I have not but Michelle Nunan has. You can check out her tutorial here https://divisoup.com/four-linkable-image-hover-effects/
Awesome! I want to do something like this but time based, not hover based. If you look at the top of this page https://www.gametruckparty.com/parties/video-games it does what I want it to do, but I don’t even know what to call that to look into how to do it. So I guess 2 questions… 1 what is the effect called? and 2. Any pointers on how to do it? Thanks!
Thats called the Ken Burns effect. Here is a tutorial on how to do that. https://www.elegantthemes.com/blog/divi-resources/ken-burns-effect-divi
Once again – you are awesome!
Hi geno thanks for tutorial i would like to know how can i add button in image on hover like that i did some modification in this and would like to use it in divi thanks
http://codepen.io/philcheng/pen/YWyYwG
I would just use the image in the background of the column. Then add a button module in that column and use css to make it have zero opacity until you hover.
Thank-you so much. This is what I love about DIVI… You’re not stuck on your own trying to figure everything out. There is literally a whole community of people who are sharing best practices, tips and tricks.
Glad you find the tuts useful. Yes thats why I love this community as well.
Hello and thanks
it works very well
However, I’ d like to zoom out
I tried your code with the reveersed numbers :
/*————————————————*/
/*———[GQ – CUSTOM BLURB HOVER]————–*/
/*————————————————*/
@media only screen and (min-width : 767px) {
.gq-blurb-hover .et_pb_main_blurb_image {
position: relative;
overflow: hidden;}
.gq-blurb-hover img.et-waypoint {
margin-bottom: -5px;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: scale(1.11);
transform: scale(1.11);}
.gq-blurb-hover img.et-waypoint:hover {
-webkit-transform: scale(.99);
transform: scale(.99);}
}
But it did not work
I am just wondering if there’s some way around it, or have I made a mistake somewhere? I am sure i didnt touch other parts of the css except for taking off the rotate. But i took that off for the zoom in and it worked perfectly.
thanks for the great tut btw
marie
Im not sure why it wouldn’t have worked. Should work fine.
This is awesome! Thanks!
You are welcome! 😀
Very usefull, thank you
Reading this kind of article help me learning CSS and doing some tests.
Thanks Netref. My biggest goal is to help others learn CSS and cool new stuff. So I appreciate you letting me know it is working 🙂
Hi Geno, first off, this site is a constant source of valuable support for anyone designing with Divi, thanks!
Now to the question 🙂 Is there anyway to add an overlay to the image on hover? I have been searching (and trying all sorts of combinations) and cannot get any results. I would love to have an rgba overlay on hover (just the image) and an icon would be even cooler 🙂 Please tell me this is possible!
I am working on a new tutorial for that 😉