Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

Divi Blurb Image Hover Animations

Click here to see live demo

 

Lets Get Started On The Divi Blurb Module

 

1. Create a new section and add the blurb module.

001

 

2. In the module’s General Settings, upload the image you want to use.

002

 

3. In the module’s Custom CSS tab, give the module the following CSS Class: gq-blurb-hover

003

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.

004

 

If you want it to zoom out on hover instead of zoom in, just switch these numbers

005

 

If you want to remove the rotation just remove this code

006

 

 

And that’s it! Have fun!


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest