Scaling Images With Jquery (Resize Image on Hover)

Harnaaz
Harnaaz November 26, 2018
0
Jquery Jquery

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:

Comments 0

Living Phat3
Living Phat3
Reply

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?

February 15, 2019
BUDDHADEB DAS
BUDDHADEB DAS
Reply

Recently I saw your grocery theme its awesome ..

April 29, 2019
Hossi
Hossi
Reply

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

June 17, 2019
Ladan
Ladan
Reply

Thank you for this example! I have been stuck on the :hover pseudo class, trying to find out why it wouldn’t work with just CSS. I use it on my blog in Tumblr, so apparently I learned that Tumblr is limited as to which code(s) you can use. I learned that CSS can’t be used inline, as I had it. Really strange, ha 🙂

February 28, 2023

Leave a Reply

Your email address will not be published. Required fields are marked *