Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Zoom Thumbnail Images on Hover

Envira Gallery is highly customizable using CSS, including the ability to zoom thumbnail images on hover in a gallery.

Add the following CSS to the bottom of your active theme’s style.css file to cause all Envira Gallery thumbnail images on your site to zoom on hover:

.envira-gallery-wrap .envira-gallery-public .envira-gallery-item img { 
   transition: all .2s ease-in-out; 
}
.envira-gallery-wrap .envira-gallery-public .envira-gallery-item:hover img { 
   transform: scale(1.1); 
}
.envira-gallery-wrap .envira-gallery-public .envira-gallery-item,
.envira-gallery-wrap .envira-gallery-public .envira-gallery-item .envira-gallery-item-inner { 
   overflow: hidden; 
}

You can also adjust the amount of zoom by editing the transform: scale(1.1) value, a higher number will result in a larger zoom level.