CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
Jona
Jona

Reputation: 45

Scale Image With JQuery

I have some code where I am trying to resize an image on hover, I think I need to add a class to it, but I have struggling on making it look smooth and actually working. So, can I just change class p-6 to p-5 to approach the effect i want?

This is the HTML markup related to the image:

<div class="col-lg-6 order-lg-2">
  <div class="p-5">
    <img class="img-fluid rounded-circle" src="img/joe.jpg" alt="Joe's Image">
  </div>
</div>

Thanks in advance for the help!

Upvotes: 0

Views: 1122

Answers (2)

Shidersz
Shidersz

Reputation: 17190

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 scale an element you can use the CSS transition in conjunction with transform: scale(<some_number>) properties. Check next example:

$(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)");
        }
    );
});
<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="Joe's Image">
   </div>
</div>

Upvotes: 0

Tibbelit
Tibbelit

Reputation: 1335

I would solve this using CSS animations, like this:

Note: I used an id below, but class would be the way to go if it's many pictures (and not only one) you want to do this to.

Note 2: Of course you can solve this with JavaScript and jQuery, if you want to do that instead, please let me know - and I'll update the answer.

#my-image {
  width: 90%;
  padding: 5%;
  transition: all 1s;
}

#my-image:hover {
  width: 100%;
  padding: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6 order-lg-2">
   <div class="p-5">
     <img class="img-fluid rounded-circle " src="https://t3.ftcdn.net/jpg/00/92/53/56/240_F_92535664_IvFsQeHjBzfE6sD4VHdO8u5OHUSc6yHF.jpg" alt="Example Image" id="my-image">
   </div>
</div>

Upvotes: 1

Related Questions