Image/thumbnail Zoom Effect on Mouse Hover Using jQuery

In this post, we will discuss jQuery custom code to implement Image/ Thumbnail Zoom effect on hover. For a number of images, we usually place thumbnails of larger images which be selected by the user to view full-size image.

In this example, we will place images in square boxes which will show thumbnails by default but zooms to original dimensions as we over/ mouseover with the cursor. A user can also click on that image thumb to view full-size image in fullscreen.

We will use jQuery and some custom CSS code to give style to thumbnails and fullscreen zoom effect. Here we will also use jQuery’s animate function and a small login to get image’s actual dimensions and apply on hover and click.

You can check the working demo here

Let’s start with implementation.

First, add following HTML, we will have a list with thumbnails as background images. On these thumbnails, we will bind jQuery hover event to zoom the image to full dimensions.

 

Add following CSS style for thumbnail list and the fullscreen preview of the image.

 

Next, we have following jQuery custom code to add some event handlers. We will bind a hover and hover out event to give zoom effect using the animate method of jQuery.

We will fetch the image’s original dimensions to show a zoomed image with proper dimensions. Here we also have a variable named perc using which we can control zoom level of the image for example if we give 40 them image will be 40 percent smaller then original dimensions.

 

That’s all, now our thumbnails will look like this.

Check demo here

Leave a Reply

avatar
  Subscribe  
Notify of