Have you ever clicked on an image on a website expecting it to zoom in, only to realize it doesn’t? It’s a small thing, but it can be surprisingly frustrating for your visitors.
When people can click to enlarge an image—whether it’s a product photo, a blog image, or part of a portfolio—they tend to stay on your website longer and engage more.
I’ve set up this feature on several WordPress sites, and it’s always a quick win.
In this guide, I’ll show you three simple ways to allow users to click to enlarge images on your WordPress website. You don’t need any coding skills, and each method only takes a few minutes to set up.
Why Enlarge Images Upon Click in WordPress?
Letting visitors click to enlarge images on your WordPress website helps them see important details up close.
It’s a simple upgrade that adds a polished, professional feel, especially for portfolios, real estate listings, and photography galleries.
Plus, it can be handy for online stores where customers want to look closely at your products before deciding to buy them.
WordPress includes a basic “Enlarge on click” feature by default. It opens the image right on the page, without any background dimming or visual effect.
This works fine for simple blogs or internal pages, but it looks a bit plain and doesn’t offer much control.
If you want something that looks more modern and polished, then an image lightbox plugin is a better choice.
Instead of simply expanding the image, it opens in a sleek overlay that dims the background and keeps the viewer focused. You also get more control over how the image looks and functions.
Before I show you these different methods, there’s one more thing to keep in mind: image quality. When someone clicks to enlarge a photo, they expect a clear, high-resolution version. But large image files can slow down your site.
That’s where image optimization comes in. By compressing your images without lowering their visible quality, you can keep file sizes small and your site fast.
This means you can use images with large dimensions (like 1500px wide) that look great when enlarged, without hurting performance.
For help with that, check out our guide on how to optimize images for the web.
In this article, I’ll share 3 different methods that can enlarge your WordPress images when they’re clicked, including some lightbox options.
You can use the quick links below to jump to the method you want to use:
Method 1: Using the Default WordPress Feature (Simple)
After testing different ways to enlarge images, I’ve found that WordPress’s built-in feature is perfect for simple needs.
I’ve used this method when creating documentation or writing technical articles. It’s especially useful when you need readers to see small details in screenshots or examine specific parts of an image more closely.
The main downside is that it isn’t a true lightbox. It simply enlarges the image, and you can’t customize the look or add cool effects.
Step 1: Add Your Image in the WordPress Editor
First, you need to create or open the post where you want to add the clickable image.
Then, in the block editor, click the (+) icon to add a new block and choose ‘Image’ from the block options. Once you do, you’ll see buttons for adding an image in 3 different ways: Upload, Media Library, or Insert from URL.
At WPBeginner, we always use the ‘Media Library’ option. This makes sure that the title and alt text we add to the image are available if we reuse it in other articles.
I suggest avoiding ‘Insert from URL’. It hotlinks to an image on another website, which means the picture could break on your site if the original is ever removed.
Step 2: Set Up the ‘Enlarge on Click’ Option
After adding your image to the post or page, you can click on it to reveal the image settings.
With the image selected, click the ‘Insert link’ icon in the block toolbar. In the settings that appear, simply toggle on the option labeled ‘Enlarge on click’.
Step 3: Configure Image Settings
Now that you’ve enabled the click-to-enlarge feature, you may want to customize the original image’s settings to ensure the best display quality within your post or page.
Select your image and then check the block settings panel on the right side of your screen.
You can control how the image looks on the page by adjusting the image’s dimensions. However, this is just the display size.
When a visitor clicks the image, they will see the original, full-resolution image you uploaded to your Media Library. So, make sure you upload a high-quality image at least 1500 pixels wide.
Step 4: Preview Your Image and Publish Your Content
Before you publish your post or page with the ‘enlarge on click’ image option enabled, you’ll want to preview it to make sure it’s working.
To do this, click on the View button in the upper right-hand corner of your editor and select ‘Preview in new tab.’
I recommend you test it in every view option, especially ‘Mobile’, since many people use smartphones these days.
With the ‘enlarge on click’ image effect applied, it should expand on the same page, as seen in the example below. How much it expands depends on the size of the original image you uploaded.
Simply click on the image to return it to normal size.
Once everything looks good, you’re ready to publish or update your content.
Method 2: Using a Lightbox Plugin (More Customization)
Unlike the basic WordPress feature, a lightbox plugin creates a much more professional experience. When a user clicks an image, it opens in a stylish overlay that dims the rest of the page, making your image pop.
I recommend the free Simple Lightbox plugin because it lets you add smooth animations, customizable themes, and slideshow features that make your images stand out. It’s lightweight and works automatically with all your images once activated.
Step 1: Install and Activate the Simple Lightbox Plugin
To get started, you need to install and activate the Simple Lightbox plugin.
If you need help with this process, please read our guide on installing WordPress plugins.
Step 2: Configure Simple Lightbox Settings
After activating the plugin, it’s a good idea to head to Appearance » Lightbox and review its settings to ensure everything is set up the way you want.
Here, you’ll find Lightbox settings that let you adjust where you want to enable lightbox functionality. This can be on the home page, single posts, pages, and more.
I usually stick with the default settings since they work great for most websites.
Next, scroll down to the ‘UI’ settings. These control how the lightbox looks and feels.
By default, the plugin will use a light theme, but you can switch to dark mode if you prefer. You can also adjust the ‘Overlay Opacity,’ which controls how much the background page is dimmed when an image is open, and enable animations to change how the image opens.
Feel free to play with these settings, and don’t forget to click ‘Save Changes’ when you’re done.
Step 3: Add Your Image and Enable Lightbox
Now, let’s test out the lightbox feature. Simply create or open a post and add an image.
Once your image is in the editor, you need to add a caption. The Simple Lightbox plugin will show this text in the lightbox view.
Simply click the image and make sure the ‘Add Caption’ icon is activated in the toolbar. This allows you to type in the ‘Add caption’ text field below your image.
If you don’t add a caption, the plugin will automatically use the image title from the Media Library instead. However, I find that using the caption field gives you more direct control.
Next, with the image still selected, you need to click the ‘Link’ icon in the toolbar and select the ‘Link to Image File’ option. This is a key step that allows the Simple Lightbox plugin to work.
Once you do this, the plugin will automatically detect the link and apply its lightbox effect when a visitor clicks on the image.
💡 Note: You can also use Simple Lightbox for an entire image gallery. Simply create an image gallery using the block editor and then follow the steps described in this method to add the lightbox feature to each image.
Step 4: Test Your Lightbox
Now, let’s test the lightbox feature by previewing the post. Just click the View option in the upper right-hand corner and then select ‘Preview in new tab’.
Once the new tab opens, go ahead and click on the image. You should see it open smoothly in a lightbox overlay with a darkened background.
Depending on your design settings, you will see the lightbox in a light or dark theme. Here’s what the light theme looks like.
The light theme surrounds the photo with a white frame, which creates a good contrast with the darkened background.
Now here’s what the dark theme looks like.
You should also see your image caption in the bottom left corner of the lightbox.
I also recommend previewing your lightbox on other screen sizes to make sure it looks good on every device.
You can do this by returning to the View option and selecting the ‘Desktop’, ‘Tablet’, or ‘Mobile’ option. After that, click ‘Preview in new tab.’
Method 3: Using a Gallery Plugin (Best for Multiple Images)
If you’ve ever wanted to spotlight multiple images, then gallery plugins are hands down the best solution. They help organize and showcase a series of images with image enlargement functionality without slowing down your site.
These plugins can improve user interaction by making your content more engaging and visually appealing, giving visitors a seamless experience navigating through your images.
I recommend Envira Gallery because it allows you to create beautiful, customizable galleries that look great on any device. It’s also super beginner-friendly.
Plus, it includes performance features like lazy loading to make sure your galleries don’t slow down your site. And its AI tool can help you create custom images right inside WordPress.
Most importantly, the plugin offers a lightbox setting with lots of customization options. This way, you can get all the benefits of the click-to-enlarge image feature, plus some cool settings for layouts, gallery transitions, and much more.
Want to learn more about what the plugin can do? We’ve tested it extensively in the past, and you can check out our full Envira Gallery review for more information.
📝 Note: While there’s a free version of Envira Gallery available, I recommend the Pro version for advanced features like SuperSize lightbox, Envira AI, and social sharing tools.
Now, let’s go through the steps of using Envira Gallery to add a lightbox feature.
Step 1: Install and Activate the Envira Gallery Plugin
Let’s start by installing the plugin on your site. In this tutorial, I’ll use the free version, or you can purchase a Pro license from the Envira Gallery website.
Next, install and activate it by following our guide on how to install a WordPress plugin. Once you’ve activated the plugin, Envira’s setup wizard should instantly launch.
From here, click the ‘Get Started’ button to begin the process.
There are 5 steps in this wizard.
During setup, you can choose the category that describes your business or website (like photographer or business owner) and select the gallery features you wish to add.
I recommend continuing with the suggested default settings because they usually offer everything you need. However, if you have a Pro plan, you’ll be able to activate more advanced features.
Keep in mind that the ‘Lightboxes’ option should already be checked, so this feature will automatically be enabled.
Once you’ve finished the setup wizard, you’ll still need to activate your pro license if you purchased one. To do this, go to Envira Gallery » Settings and paste your license key in the field. Then, hit ‘Verify Key.’
Step 2: Create a New Gallery
To create your first gallery, go to Envira Gallery » Add New in your dashboard.
First, add a title at the top of the page. I recommend giving it a clear and descriptive name so that it’s easier to keep track of later.
Next, you’ll notice 3 options for adding images: Native Envira Gallery, Galleries from Other Sources, and Create with Envira AI.
I recommend starting with Native Envira Gallery. It’s the most straightforward way to upload your own images directly.
💡 Need original images fast? You can also create your own custom images with Envira AI. This feature makes it easy to generate unique images on demand. All you have to do is create a quick image description, pick from the results, and add it to your gallery in a single click.
Go ahead and select the images you want to include. You can add as many as you like while keeping the maximum upload file size below 256 MB.
Step 3: Configure Gallery and Lightbox Options
In the menu to the left of your gallery images, you’ll find Envira’s Gallery settings.
There are tabs for general configuration, the lightbox feature, mobile settings, and more. Let’s go through them one at a time.
You can choose your gallery layout at the top of the ‘Configuration’ section. The grid layout works great for most galleries, but feel free to experiment with other options.
Scrolling down, you can find more gallery settings options.
For example, you can enable lazy loading, set an automatic layout, and add a gallery description.
For example, you might want to set automatic layouts to ensure your gallery looks neat and organized without extra effort.
💡 Pro Tip: I recommend enabling the lazy loading option. This feature helps your gallery load faster by only loading images as visitors scroll down the page. It also helps optimize your site speed.
Next, switch to the ‘Lightbox’ tab. Remember, this feature should be enabled by default, but if it isn’t, check the box next to ‘Enable Lightbox?’
Then, you’ll want to select a ‘Gallery Lightbox Theme.’ This will determine the general appearance of your lightbox.
Your options will depend on your Envira plan and whether you have the Gallery Themes addon. But you should be able to select from a dark, light, or legacy theme.
Further down in the ‘Lightbox’ tab, you can choose how your enlarged images appear, select transition effects, and decide whether to show image titles.
Then, you can find more lightbox settings on the second half of the page.
For example, you can enable navigation arrows, infinite looping of images, or supersize mode. You can even add cool effects for when people open or close your gallery, and when they click through it.
For instance, for ‘Lightbox Transition Effect,’ you can pick fun options like Fade, Slide, Circular, Tube, Rotate, and more.
Next, I recommend going to the ‘Mobile’ tab to configure both the general and lightbox settings.
More people will probably view your gallery on phones than computers, so let’s make sure it looks great on small screens too.
In addition to activating the lightbox feature for mobile devices, you can customize mobile-specific settings such as lightbox dimensions, row heights, and title or caption displays.
As you scroll down, you’ll discover more options, including features like swipe-up to close, gallery navigation arrows, thumbnails, and more.
Finally, the ‘Standalone’ and ‘Misc’ tabs have a few extra settings you may find useful.
The ‘Standalone’ tab lets you give your gallery its own unique URL. This is a great feature if you want to share a direct link to a specific portfolio or photo album.
The ‘Misc’ tab includes tools for importing and exporting galleries, but you probably won’t need those right now.
For a deeper dive into all these settings, you can check out our detailed guide on how to create an image gallery.
Step 4: Preview and Publish Your Gallery
To preview the gallery, click the ‘Preview’ button on the right side of your gallery settings page.
Once you’re on the preview page, click through different images to test the lightbox effect.
Here, you can see the image’s name and the rest of the gallery.
When you test the gallery, the images should open smoothly. If you chose a transition effect, it should be visible here.
For example, I set the Slide transition effect, and here’s how it looks.
To navigate between images, click on the navigation arrows on either side of the screen or use the arrow keys on your keyboard.
At this point, you may want to make sure the navigation arrows work and that your image titles appear correctly if you enabled them.
Once you’re happy with how everything works, you can publish the gallery by clicking the ‘Publish’ button on the right side of your gallery settings.
After publishing the gallery, you can move on to adding it to your website.
Step 5: Add the Gallery to Your Website
Now that your gallery is working perfectly, let’s add it to a post.
Once you are in the WordPress editor, click the (+) icon to add a new block and search for ‘Envira Gallery.’ Then drag the block onto your post.
Next, when you click the ‘Search for a gallery’ drop-down, select the gallery you just created. It will be automatically inserted into the post with all the settings you just configured.
Alternatively, you can add your gallery to pages, widgets, or custom post types by using a shortcode.
You can find this shortcode on the right sidebar of the gallery settings, just under the ‘Publish’ button.
For more information, see our guide on how to add a shortcode in WordPress.
Before clicking the ‘Publish’ button, make sure you preview your post one final time to make sure the gallery appears exactly as you want it.
Your images should now be displayed in a professional grid layout with a smooth lightbox effect when clicked.
FAQs About Enlarging Images in WordPress
Here are some frequently asked questions about enlarging images in WordPress.
How do I enlarge images in WordPress?
You can use the default ‘Enlarge on click’ feature in WordPress for basic functionality. For more control, you can use plugins like Simple Lightbox or Envira Gallery.
How do I automatically resize images in WordPress?
WordPress automatically creates several smaller versions of your images when you upload them. To have more control over image dimensions or to optimize them for speed, I recommend using an image optimization plugin like EWWW Image Optimizer.
Plugins like Envira Gallery also give you precise control over the display dimensions of images within your galleries.
How do I force image size in WordPress?
You can set custom image dimensions within your theme. For a detailed guide, check out our tutorial on how to create additional image sizes in WordPress. This is a great way to ensure a consistent layout across your galleries and site.
If you prefer using a plugin, consider options like Envira Gallery. It allows you to specify exact image dimensions efficiently, providing control over how your galleries look. This can help maintain a polished appearance across your site.
Bonus Resources: Manage & Improve Your WordPress Images
I hope this article helped you add the ‘enlarge images upon click’ feature in WordPress. Here are some bonus guides if you’re interested in managing and improving your WordPress images:
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
