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.
Thanks dude
Most welcome!
Does this work with background images? I’m having having difficulty getting it to work with the background image of a Full Width Header.
Hi.
Doesn’t work in the filterable portfolio module. The pictures grow with overflow. And i would like the frame maintain the original size while the picture is growing.
It is possible to do in this module? Thanks a lot