How to Zoom Thumbnail Images on Hover

Would you like use CSS to zoom an image on hover? With a little CSS you can easily achieve this! This tutorial will show you how you can use CSS to zoom your gallery image on hover.

• Setup
  1. Create or edit your gallery
  2. Select Gallery Columns
  3. Install and activate the CSS Addon
  4. The CSS
• FAQs
  • Can I do the same for albums too?
  • Do I have to use CSS for this?

Setup

Step 1 – Create or edit your gallery

Your first step is to create a new gallery or edit an existing one. You can follow along with our documentation for creating your first gallery

Step 2 – Select Gallery Columns

Next, on the Configuration tab, select any column count for your Number of Gallery Columns.

Step 3 – Install and activate the CSS Addon

The next step you’ll need to install and activate Envira’s CSS Addon. Navigate to the Addons section and click Install then Activate on the CSS Addon.

Step 4 – The CSS

Below is the CSS we’ve used in our demo.

You’ll need to change this ID number to match your gallery ID number. You can find this by looking in the sidebar of your gallery edit screen.

For more information on how to find your gallery ID number you can read this article.

You can also just add this CSS to the WordPress Customizer to make this change for all of your Envira Galleries!

To find out more about the WordPress Customizer, please review our article on How to add custom CSS to the WordPress Customizer.

If you’re using the CSS Addon to only change 1 gallery, add your CSS to the Misc tab inside the Custom Gallery CSS box.

Once you’ve added your CSS just click Publish or Update to save the changes to the gallery.

#envira-gallery-438745 .envira-gallery-item img { 
transition: all .2s ease-in-out; 
} 
#envira-gallery-438745 .envira-gallery-item:hover img { 
transform: scale(1.1); 
} 
#envira-gallery-438745 .envira-gallery-item, #envira-gallery-438745 .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.

If you’re going to want this change for all galleries, just remove the gallery ID number from the CSS and add your CSS to the Appearance » Customize » Additional CSS and click Publish to save the changes.

Check out the demo

FAQs

Q: Can I do the same for albums too?

A: Absolutely! You’d use exactly the same CSS but just be sure the ID matches the album. If you added your CSS to the WordPress Customizer then it would automatically make this change for all Envira gallery and album images.

Q: Do I have to use CSS for this?

A: Not at all! Using Envira’s Gallery Themes Addon, if you select the Polaroid theme, there is automatic styling added when you zoom on the image.

You can see a demo of the Polaroid theme to see it in action!