CSS Image zoom on hover

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

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



Refer : http://www.twobluetoucans.co.uk/divi/image-hover-zoom-effect-divi/



/* -------- Media equiry ------------------*/

/* 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:400px !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 */
}


----------------------------------- script ---------------------------------


$(window).scroll(function() {
  var scroll = $(window).scrollTop();
$(".zoom img").css({
transform: 'translate3d(-50%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/5)/100+')',
//Blur suggestion from @janwagner: https://codepen.io/janwagner/ in comments
//"-webkit-filter": "blur(" + (scroll/200) + "px)",
//filter: "blur(" + (scroll/200) + "px)"
});
});