Divi Help Documentation by Gables Tech

Image

Image- How to Add Zoom-In Hover Effect to the Image Module

  1. Open the Image module setting by clicking on the Gear Icon

  2. Go to Advanced Tab Custom CSS Free Form CSS

  3. Add the following CSS code:

     

    selector.et_pb_image:hover img,
    selector .et_pb_image_wrap:hover img,
    selector a:hover img {
      transform: scale(1.3);
      transition: all 2s 0s ease;
    }
    
    selector,
    selector a {
      overflow: hidden;
    }
    
    selector.et_pb_image img,
    selector .et_pb_image_wrap img,
    selector a img {
      transition: all 1s 0s ease;
    }