Digital Photography Tips, Tutorials and Resources
Do you want to add hover effects to your images? Effects on mouse over can add a nice touch to your image galleries. In this tutorial, we will share how to add image hover effects for WordPress.
Sometimes it’s the small details that really wow and impress your photography website visitors. Adding image hover effects is one of those little details, and it can really make your image galleries “pop”.
WordPress does not have image hover effects by default, so you’ll need to use a plugin like Envira Gallery. Envira is a fully-featured image gallery plugin, which allows you to change the image thumbnail opacity on mouseover.
To add image hover effects for WordPress, you’ll need to follow these 6 simple steps:
- Step 1. Install and activate Envira Gallery plugin
- Step 2. Install and activate Gallery Themes addon
- Step 3. Create an image gallery in Envira
- Step 4. Go to the gallery settings for image hover effects
- Step 5. Publish the image gallery to your page/post
By the end of this tutorial, you’ll be able to create an image gallery with image hover effects to the thumbnails that will look like these:
Check out a live demo of the hover effects here. Ready to get started? Let’s go!
Step 1: Install and Activate Envira Gallery Plugin
To add image hover effects for WordPress, first thing you need to do is install and activate Envira Gallery plugin to your site.
You can learn more about how to install Envira in WordPress.
Step 2: Install and Activate Gallery Themes Addon
Upon activating the plugin, you need to go to Envira Gallery » Addons from your WordPress admin backend to install and activate Gallery Themes addon.
To access this addon, you must have Enivra’s Silver or higher license. You can learn how to upgrade your license here.
After activating the addon, you can go to next step to create an image gallery in WordPress.
Step 3: Create an Image Gallery in Envira
You should go to Envira Gallery » Add New from your WordPress admin backend to create an image gallery in Envira.
Let’s start by giving a title to the image gallery.
Now you should drag and drop the photos from your computer to the Native Envira Gallery section.
To learn more about the gallery settings, you should check out this guide on how to create an image gallery with thumbnails in WordPress.
Step 4: Go to the Gallery Settings For Image Hover Effects
After adding the photos in your image gallery, you are ready to add the image hover effects to your image gallery.
Simply go to the Config tab and scroll down to Image Opacity option. You can reduce the opacity to add the basic image hover effects to the gallery thumbnails.
We set the opacity to 40%, so the image gallery thumbnails will be faded and show the original view on mouse hover.
You can also add image hover effects to thumbnails by changing the gallery themes. Go to the Lightbox tab and select a theme from Gallery Lighbox Theme dropdown.
There are multiple themes available in the dropdown. You can use Captioned, Polaroid, and Sleek themes for the image hover effects.
Here are the image hover effects produced by the above mentioned themes:
- Captioned theme will fade the thumbnail on image hover.
- Polaroid theme will grow the image thumbnail on hover.
- Sleek theme will change the image border color on hover.
Step 5: Publish the Image Gallery to Your Page/Post
Once you are done with all the settings for the image gallery, go ahead and click on the Publish button (or Update button if you’re editing an existing gallery).
You need to copy the shortcode from the Envira Gallery Code widget. This shortcode will help you to display the image gallery to your WordPress site.
Next you should edit a page/post or go to Pages/Posts » Add New to create a new page/post. In the visual editor, you’ll need to paste the shortcode. Make sure to click on the Publish button.
That’s all. You can go to your site to see the image hover effects on gallery thumbnail. In this example below, you can experience the image hover effect with the Captioned theme:
That’s all. We hope this tutorial has helped you to learn how to add image hover effects for WordPress.
For step by step instructions for more hover effects check out these guides:
- How to Style Your Gallery Images on Hover
- How to Style Image Title and Caption Hover Effects
- How to Zoom Thumbnail Images on Hover
You may also want to check out our guide on how to allow users to print image galleries in WordPress.