Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

Image Hover Effects For WordPress

How to Add Image Hover Effects for WordPress

by Waseem Abbas on Apr 17, 2017

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 this:

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.

Envira Gallery

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.

Gallery Themes Addon

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.

Add New Gallery

Now you should drag and drop the photos from your computer to the Native Envira Gallery section.

Drag and Drop Photos

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.

Image Hover Effects

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.

Select Theme

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.

Copy Shortcode

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.

Add Shortcode

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 Polaroid theme:

We hope this tutorial has helped you to learn how to add image hover effects for WordPress. You may also want to check out our guide on how to allow users to print image galleries in WordPress.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.