Image zoom effects are a great way to add flavor to your website! Divi doesn’t offer hover effects out of the box, but in fewer than 5 minutes, you can add this eye candy to as many images as you please.

 

Add nifty zoom effects to your images.

In this video tutorial, we showcase how to accomplish this in two different ways using on two different Divi modules, the image module and the portfolio module. For the portfolio, we show how to target one specific portfolio module. For the images, we show you how to add a class that you can then insert in the CSS Class field in the Advanced Options tab for every image where you want to see the effect.

Grab the example code below and tweak it to your liking


/* Specific portfolio module image zoom (replace the 0 below with the ID of the
portfolio you want to change) */
 .et_pb_fullwidth_portfolio_0 .et_pb_portfolio_item:hover {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
 }
 .et_pb_fullwidth_portfolio_0 .et_pb_portfolio_item:hover {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
 }
 /* The effect */
 .image-zoom img {
 transition:all 0.5s;
 -moz-transition:all 0.5s;
 -webkit-transition:all 0.5s;
 }
 .image-zoom img:hover{
 transform:scale(1.1);
 -moz-transform: scale(1.1);
 -webkit-transform:scale(1.1);
 }

For another great and simple tutorial, check out Advanced Columns for Divi. Update: And for new and more robust effects, check out the ElegantTheme’s blog on feature enhancements within the out-of-the-box Divi Builder.