TutorialWeb Tips and Tricks

Scaling Images With Jquery (Resize Image on Hover)

Using only JQuery you can use the hover() listener for mouseenter and mouseleave events and manage the CSS properties also with JQuery using css() method. For scaling an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example for better understanding:

HTML :

<script src="https://code.jquery.com/jquery-3.3.1.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="col-lg-6 order-lg-2">
   <div class="img-wrapper p-5 text-center bg-info">
     <img class="img-fluid rounded-circle" src="https://picsum.photos/200/300/?random" alt="Askbootstrap.com">
   </div>
</div>

Javascript/Jquery:

$(document).ready(function()
{
    $(".img-wrapper").find("img").css("transition", "transform 500ms ease-in-out");

    $(".img-wrapper").hover(    
        // Handler for mouseenter
        function()
        {
            $(this).find("img").css("transform", "scale(1.2)");
        },
        // Handler for mouseleave
        function()
        {
            $(this).find("img").css("transform", "scale(1)");
        }
    );
});

Output:

Tags
Show More

3 Comments

  1. Thank you, this worked, but what would I do if i have multiple pictures next to each other, and what i want is for the one that is being enlarged for it to be on the top layer so it over laps all other images? How would i do this?

  2. Jquery :

    function mOver(Jeese) {

    $(Jeese).mouseover(function () {
    $(this).animate({
    height: ‘+=25px’,
    width: ‘+=25px’,
    left: ’50’,
    top: ’50’,
    // clearQueue ??
    }, 500, ‘easeOutCirc’).clearQueue;
    });
    $(Jeese).mouseout(function () {
    $(this).animate({
    height: ‘-=25px’,
    width: ‘-=25px’,
    left: ’50’,
    top: ’50’
    // clearQueue ??
    }, 500, ‘easeOutCirc’).clearQueue;

    });

    };

    mOver(‘img’);

    HTML:

    How can I make the image inside of this div scale without the actual div scaling on hover using JQ. It works but the whole of div become scale not only image

Leave a Reply

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

Close