Adding a zoom effect to an image on hover isn’t enormously difficult and it creates interest and, if you have a link on the image, gives some visual feedback. Here’s a very simple example –

…and it is very easy to do. Just pop this code into your child style.css or into Divi -> Theme Options -> General -> Custom CSS

.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);
}

Then ‘attach’ the image-zoom class to any images you want to zoom by entering the class name into the CSS Class field on the Advanced Design Settings for each image.

 

All good so far 🙂 But what if you don’t want the image to actually expand? It would look more ‘zoom-like’ if it didn’t do this. It is also in danger of interacting with objects around it if it expands. You can constrain the zoom by hiding the overflow. Add this to your previous CSS…..

.image-zoom-constrained {      
  overflow:hidden;
}

and add this new additional class to the image CSS Class as well –

and this is what happens….

ok… well that’s half right 🙂 In fact, if you use Inspect you can see what the issue is…. In Google Chrome, right click on the image and select ‘Inspect’ from the bottom of the drop down menu. You will see some new palettes appear on the right. The image should be highlighted both on the website and in the palette where it’s code is highlighted. If you carefully move the mouse to the palette and move it over the text above the image that I have highlighted here….. you should see that the blue box expands….

 

What you are doing by moving the mouse between the ‘img’ and the ‘div class et_pb_module’ in the right hand palette is showing where these elements appear on the website page (on the left). The image (img) is sitting inside an et_pb_module element and this is as wide as the row. That’s why the image, when zoomed. is constrained in the vertical but not in the horizontal.

Interestingly, you can see this effect disappear if you use a three column row. By doing this you reduce the width of the et_pb_module elements. All three images below and are sitting inside their own et_pb_module element. These et_pb_module ‘containers’ are now 1/3 of the row wide. As it happens, you still have the problem if you only have two columns.

 

In fact, what is happening here is that introducing more columns into the row has itself constrained the width of each of the et_pb_module elements so that they are actually narrower than the images. So, the images are resized to fit the narrower et_pb_modules and there is no ‘spare’ space around them for the image to expand into. You should be able to see this if you use Inspect again.

That makes sense but it’s a bit awkward to only be able to use this in three column rows!

I think one way to fix this is to set an upper limit on the size of the image itself. You can do this in the image module by setting Image Max Width in the Advanced Design Settings. Or, you can add a little more CSS….

.image-zoom-width-300 {      
  max-width:300px;   
}

Note though, that this is not being applied to the image, but to the <div> element that contains the image. It is this container whose size is being restricted.

Of course, you then have to also remember to add this extra class again to your CSS Class field for each image.

A couple of points to end with…. you can, of course, combine all of the CSS above so that you only need to use a single class name –

.image-zoom {      
  overflow:hidden;     
  max-width:300px;   
}

.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);
}

 

This would save a bit of typing but you could argue that there are advantages to keeping these as separate classes in some circumstances. More problematically perhaps, you are hard-wiring the image size into the CSS. This means that on resize, your images may not play so nicely with the objects around them…. You could consider managing the resizing yourself with something like…

 

/* above 1400 the default sizes are used */

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    /* tablets and desktop */
  .image-zoom {      
    max-width:250px !important;  	                 
  }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
    /* tablets and desktop */
   .image-zoom {      
    max-width:220px !important;  	                 
  }
}


@media only screen and (min-width: 980px) and (max-width: 1099px) {
    /* tablets and desktop */
  .image-zoom {      
    max-width:200px !important;  	                 
  }
}

/* below 980 Divi takes moves to a single column layout */

@media only screen and (max-width: 979px) {
    /* landscape phones */
}

@media only screen and (max-width: 979px) and (orientation: portrait) {
    /* portrait phones */
}

You are going to have to fiddle with the numbers to get this to work for your site…. In effect, what you are doing here is reducing the size of the images by hand as the page narrows.

I did also consider applying the image-zoom class to the ROW rather than to the Divi image module but it’s not difficult to think of scenarios where you have multiple images in a row but do not want to apply the zoom to all of them. So best, I think, to apply this to individual images. If you do want to use this on a row…. you need this instead of the above…. and you need to apply the image-zoom class to the row module CSS Class field rather than to the images themselves….

 

.image-zoom .et_pb_image { 
   overflow:hidden;
   max-width:300px;
}

.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);
}

Finally, just be aware that the above is intended to be used with the Divi Image Module and is unlikely to work with other Divi modules that contain images, such as Divi Gallery Modules.

Subscribe To Our Blog

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!