Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Easily Add Magnify Image Effects in WordPress

How to Easily Add Magnify Image Effects in WordPress

With device screens getting smaller, providing your visitors with the ability to magnify images easily is more important than ever. An image magnifier lets you “zoom in” on specific areas of an image. The rest of the image remains the original size, with only the area of interest enlarged.

We’ve had the technology needed to magnify images for years, but implementing the effect has been complicated and time-consuming. If you’ve been looking for an image zoom WordPress plugin to make it easy, you’re in luck. We’re going to use the Image Hover Effects Ultimate plugin to achieve the effect in minutes.

No code, no muss, no fuss! Let’s get right to it.

Installing the Image Hover Effects Ultimate Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Image Hover Effects Ultimate.”

search for the WordPress Image Hover Effects Ultimate plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Image Hover Effects Ultimate plugin

Finally, click the “Activate” button.

click to activate the WordPress Image Hover Effects Ultimate plugin

Magnify Images Using Image Hover Effects Ultimate

The way the plugin works, you create an image magnifier “Style.” The Style controls how the image magnification works as well as other configuration options. You can add multiple images to a Style. All of the images in a given style are displayed together in a column on the page or post.

There are eight steps involved in setting up a Style to magnify images, so this section is a bit long. I’ve numbered the steps so you can take your time and follow along.

1. Access Image Hover

In the left column navigation, mouse over the “Image Hover” link and click the “Image Hover” link.

click the "Image Hover" link

2. Use the Image Magnifier

Click the “Image Magnifier” tile.

click the "Image Magnifier" tile

You’ll see the three options to magnify images. One displays the magnified image to the right, another displays it to the left, and the other displays the magnified part of the image on top of the original image.

Hover over the demo images to choose which option you’d like to use.

hover over demo images to see effect

3. Create the New Style

Click the “Create Style” button.

click the "Create Style" button

A “New Image Hover” popup will open.

4. Name and Save the Style

Give the style a name in the “Name” field.

Choose the magnification style you want from the “Layouts” buttons. (1st magnifies to the right, 2nd magnifies over the image, 3rd magnifies to the left.)

Click the “Save” button.

click the "Save" button

A configuration page will open.

5. Open a Form

Click the “Open Magnifier Form” tile.

click the "Open Magnifier Form" tile

An “Image Hover Form” popup will open.

6. Open the Image Library

In the “Media Type” section, you have the option to choose an image from your Media Library or a URL. For this demonstration, we’re going to select an existing image from the Media Library.

In the “Image” section, mouse over the title and click the “Choose Image” link.

click the "Choose Image" link

7. Choose Your Image

Your Media Library will open. Click the image you want to add magnification to and click the “Choose Image” button.

click the "Choose Image" button

8. Fine Tune and Submit

Now we’re back at the “Image Hover Form” popup. You should see the image you selected from your Media Library in the preview pane.

I want the magnifier to lay on top of the image, so I’ll set the “Magnifi Position” to “None.” (I’m not sure why the setting is “None,” and not “Top,” but it is.)

We’ll leave the “Right Position” setting alone. That affects where the magnified image appears when the magnification is set to one side. Since we’re not going to magnify images to the side, that should stay at “0.”

Click the “Submit” button.

click the "Submit" button

Adding the Magnified Image to a Page or Post

Okay, we’ve created a style and added an image. Now let’s insert the image on a page or post.

We’re still on the style editing page, and below the tile where we added the image, there’s a “Shortcode” section. In our example, the shortcode is [iheu_ultimate_oxi id=”1″].

Copy the shortcode.

copy the shortcode

Open a page or post and insert a shortcode block.

Paste the magnifier shortcode into the block. If you’re using the classic WordPress editor, just paste the shortcode into the page the way you’d paste any text.

paste the magnifier shortcode into the block

Click the “Update” button to save the page.

Now when you view the page, your image is displayed where the shortcode was inserted. Hover over the image to see the magnification effect.

hover over the image to see magnification

I can’t really demonstrate the magnify image on hover effect on a static image, but it’s working. 😉

Magnify Multiple Images by Adding Another Image to the Style

In the left column navigation, mouse over the “Image Hover” link and click the “Shortcode” link.

click the "Shortcode" link

This page contains a list of your Styles.

In the “Name” column, you can see the name I gave the Style when we set it up, “ImageMag.” The shortcode can also be copied from this page. There’s PHP code as well to give advanced users the ability to insert Styles into templates.

Click the “Edit” button.

click the "Edit" button

Now we’re back on the familiar editing page.

To add a second image, hover over the plus sign (+) icon in the “Add New Magnifier” section. Repeat steps 5 through 8 above to add an image.

hover over the plus sign

When the second image is added, scroll down to the “Preview” section. You’ll see the second image below the first image we added when we created the Style.

added image in preview

Then if you go to the page where we added the shortcode, you’ll see both images.

both images on page

The Plugin Does More Than Magnify Images in WordPress

As you may have noticed in the “Image-Effects” section of the plugin, it does more than just zoom or magnify.

There are a ton of image mouse over tools, most of them involving captions. There are button animations, and my favorite, the “Image Comparison” function. Do yourself a favor and take a look at what else the plugin can do.

What Happens if You Uninstall the Image Hover Effects Ultimate Plugin

If you uninstall the plugin, pages and posts that used the plugin will be affected.

  • The Styles that you created will be deleted.
  • The plugin shortcodes will stop working, so the shortcodes themselves will be displayed anywhere they were used.

Theme Compatibility

I should tell you that I ran into theme compatibility issues with this plugin. Which is odd considering it was updated a month ago.

For each tutorial I do, I start with a fresh installation of the most recent version of WordPress. That includes the most recent default WordPress theme (which in this case was Twenty Twenty).

The magnification effect didn’t work in Twenty Twenty. Or the previous default theme, Twenty Nineteen. I had to go back to the Twenty Seventeen theme to get it to work (there was no Twenty Eighteen theme).

That doesn’t mean it won’t work in your theme.

But when I’m testing plugins, I limit myself to the themes that come with the WordPress installation. So I’m letting you know how it performed in those themes.

They Say the Eyes Are the Windows to the Soul

I don’t know whether that’s true, but I do know that we are visual creatures. We’ve been using images on the web since the first version of the Mosaic browser (ask your grandparents about that).

Anything we can do to enhance the presentation of images helps us retain visitors. So as many of your visitors transition to smaller screens, letting them see image detail more easily is a plus. The image magnifier that we’ve talked about here today does that and more.

Have you used older, manual versions of image magnifiers on your website? Do you think a WordPress plugin like this one would encourage you to use image magnification more often? Let me know in the comments.

Author: Michael Phillips

Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.