How to Blur Your Image Gallery Thumbnails in WordPress

by Waseem Abbas on May 15, 2017

Are you wondering how to blur the image gallery thumbnails on your WordPress site? A blur effect on your thumbnails entices your visitors to click on your gallery to see your images clearly. In this tutorial, we will share how to blur your image gallery thumbnails in WordPress.

By default, WordPress image gallery won’t allow you to blur the thumbnails. Since many of you asked about it, we added this feature in Envira Gallery plugin as a template. You can now blur the thumbnails of your image gallery easily. The thumbnails will turn into their original form on mouseover.

To blur your image gallery thumbnails in WordPress, you’ll need to follow these 6 steps:

• Step 1. Install and activate Envira Gallery plugin
• Step 2. Install and activate Gallery Themes addon
• Step 3. Create an image gallery using Envira
• Step 4. Go to gallery config settings & select your theme
• Step 5. Publish image gallery and copy the shortcode
• Step 6. Paste the shortcode in page/post to display the gallery

By the end of this tutorial, you’ll be able to blur your image gallery thumbnails that will look like as shown in this image below:

Ready to get started? Let’s go!

Step 1: Install and Activate Envira Gallery Plugin

First thing you need to do is to install and activate Envira Gallery plugin at your site.

To learn more about installation, you should check out this guide on how to install and activate Envira in WordPress.

Step 2: Install and Activate Gallery Themes Addon

Upon activating the plugin, you should go to Envira Gallery » Addons from WordPress admin backend to install and activate Gallery Themes addon.

To access this addon, you must have Envira Plus or higher license. Check out how to upgrade your license.

After activating the addon, you can go ahead and create your image galleries.

Step 3: Create an Image Gallery Using Envira

To create an image gallery, you need to go to Envira Gallery » Add New from WordPress backend. Simply add a title to start with it.

Next you need to add the photos in the Native Envira Gallery section of this image gallery.

Want to know more about creating image galleries? You should check out this guide on how to create an image gallery with thumbnails in WordPress.

Step 4: Go to Gallery Config Settings & Select Your Theme

After adding the photos, you need to scroll down to Config tab. In the Automatic Layout: Gallery Theme dropdown, you should select Blur theme.

Step 5: Publish Image Gallery and Copy the Shortcode

Once you are done with all the settings, simply click on the Publish button.

You’ll notice a new widget as Envira Gallery Code under the Publish widget. Copy the shortcode from here.

Next you need to display the image gallery.

Step 6: Paste the Shortcode in Page/Post to Display the Gallery

You need to go to Pages/Posts » Add New or edit an existing page/post. In the visual editor, you should paste the shortcode that you copied in previous step.

Make sure to hit the Publish button.

You can now visit your website to see the image gallery with blurred thumbnails that will look like as shown in this image below:

On mouseover, the original thumbnail image will appear without blur effect.

That’s all. We hope this tutorial has helped you to learn how to blur your image gallery thumbnails in WordPress. You may also want to check out our guides on how to blur edges in Photoshop, how to achieve blurry backgrounds using Photoshop, and 40 exit popup hacks that will grow your subscribers and revenue.

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