image magnifier reset jquery bootstrap-CodePudding

I am looking to make a image / card bigger while it is hover then reset after hover. My current code is this

var img_css = {"width": "100%", "height": "15vw", "object-fit": "cover"};
var prev_css = $("img").css();
$( "img" ).hover(
    function() {
      $( this ).css((img_css));
    }, function() {
      $( this ).css(prev_css);
    });

My answer is based on the stackoverflow answer How to get images in Bootstrap's card to be the same height/width? although this just stays in hovered state. I can provide html if needed but it looks like <img style="" src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">

CodePudding user response：

.card-img-top{
  width:50px;
  height:50px;
  float:left;
}


.card-img-top:hover{
  width:100px;
  height:100px;
}

<img style=""  src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">
<img style=""  src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">
<img style=""  src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">
<img style=""  src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">
<img style=""  src="https://images.pexels.com/photos/2033992/pexels-photo-2033992.jpeg">