How to Add Zoom effect on Image hover in WordPress

There are many possible options to add a Zoom Effect on image hover in WordPress. Many users use plugins whereas, some use a plenty of line of codes to integrate such functionality on a site. In this tutorial, I am going to show you how you can accomplish the exact same effect or better than the most plugins. We will use only three simple steps to achieve our goal. Let’s start.

Add Zoom Effect on Image hover in WordPress


Step 1: Adding a class img-zoom in the_post_thumbnail(); function


If you are getting the Featured image from the post, then the_post_thumbnail(); function is used. However, if you want to add your custom class , you achieve it by adding the following code. Here, we have added the class img-zoom.

If you want to use the zoom effect on the Featured Image of Pages or Posts,  you probably need to add the following code in your template file of the Child Theme.

the_post_thumbnail( 'thumbnail', array( 'class' => 'img-zoom' ) );

The above code, when translated to HTML looks similar like this:

<img class="img-zoom" src="prabin.jpg" alt="Prabin Parajuli">

Step 2: Writing CSS Code in custom.css file


If you haven’t registered your custom.css and custom.js styles and scripts yet in your current theme, do it now. In step 1, we’ve already added an “img-zoom” class inside the image tag. Now all you need is to add the following codes in your custom.css file. Just copy and paste it.

.img-zoom {
width: 310px;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}

.transition {
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}

NOTE: You can modify/change the above stylings according to your project needs.

ALSO READ  How to Remove Hardcore Width and Height of Thumbnail size in WordPress

Step 3: Adding a jQuery Script inside custom.js file of the theme


Now, here comes the jQuery part.  Here we’ll add class “transition” during image hover and remove the same class when the mouse cursor is not hovered on the image. We are using the “transition” class in order to scale the image in precedence given in the CSS Snippet we used in STEP 2.

Learn more about Transition Effects .
Add the following Script in the custom.js file.

// Adding Zoom Transition Effect on Image hover
jQuery(document).ready(function(){
  jQuery('.img-zoom').hover(function() {
  jQuery(this).addClass('transition');

  }, function() {
   jQuery(this).removeClass('transition');
 });
});

So we have finally added our very own custom Zoom Effect on Image hover in WordPress. So Why is it different that other zooming effects? What is the point of using this codes instead of using other plugins ? There are dozens of free plugins available in the WordPress repository with the similar feature. Why not use them? Well, it’s up to you to decide accordance with your website’s requirement.

You can either use plugins or use this simple trick. You are free. But my point is most plugins are not updated in months and they give a lot of headaches when a new version of theme or WP itself is updated. Also, some plugins slow your website’s speed due to their heavy scripts and CSS used in it. I too most of the time follow this effect on my client’s project. Simple, fast, and easy No?

DEMO

Cursor your mouse over the image below

Prabin Parajuli