Basic Zoom In Effect for Images using jQuery!

CEan #-Link-Snipped-# asked how can we make images zoom in after a click. We can use .animate() function and change the properties of an image. Lets have a container and place all the images.

​<div class="zoom"​​​​​​​​>
    [img]https://lorempixel.com/640/480/nightlife/1/[/img]
    [img]https://lorempixel.com/640/480/nightlife/2/[/img]
</div>​

And now, lets define a thumbnail size of the images. The original size is 640px x 480px. Lets take the half of it. So, we will keep it as 320px x 240px. We need to define that in the style as:

​.zoom img {
    width: 320px;
    height: 240px;
}​

Now comes the JavaScript part! 😀 We bind the click function of the image to animate its CSS Width and Height properties. That can be done by:

​$(".zoom img")​.click(function(){
    $(this).animate({
        width: '640px',
        height: '480px'
    }, 1000);
});​

Now, you can see the live demo here: <a href="https://jsfiddle.net/Vn9Gx/" target="_blank" rel="nofollow noopener noreferrer">Edit fiddle - JSFiddle - Code Playground</a>

If #-Link-Snipped-# was asking about having a set of images and upon clicking on it, making them show in a modal window, then dude, you are asking how to make something like a <a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank" rel="nofollow noopener noreferrer">Lightbox2</a>! 😀 Check it out too! Try this out and let me know your comments.