Envira Gallery Blog
Digital Photography Tips, Tutorials and Resources
Digital Photography Tips, Tutorials and Resources
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:
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!
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.
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.
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.
After adding the photos, you need to scroll down to Config tab. In the Automatic Layout: Gallery Theme dropdown, you should select Blur theme.
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.
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.
Envira Gallery helps photographers create beautiful photo and video galleries in just a few clicks so that they can showcase and sell their work.