How to zoom image from center without using exact position

Question

I have a picture in html code.

I use jquery to zoom it when mouse on image - but the image zooms from left and top and I want it to zoom from center.

I searched in stackOverFlow and every one use position attr but I don't use it.

This is my sample code:

<div class="flex-col

 let image = $('#navigation_bar img'); $('#menu-item-948').hover(function() { // alert("top :"+position.top +" left : "+ position.left +" right: "+ position.right +" bottom: "+ position.bottom); $(image) .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-6.png") .animate({ width: "5rem", height: "5rem", top: "0.5f", left: "0.5f" }, 50); $('#menu-item-948').append('<p id="text" >text</p>'); $('#text').css('color', '#55EA00'); }, function() { $(image) .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png") .animate({ width: "2.5rem", height: "2.5rem" }, 300); $('#text').remove(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-col hide-for-medium flex-center" style="margin-left: 50%; margin-top: 10%"> <ul id="navigation_bar" class="nav header-nav header-bottom-nav nav-center nav-divided nav-uppercase text-center "> <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-948"> <a href="https://matiloos.dts.company/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a> </li> </ul> 

I have many of this picture in navigation bar.

Answer 1

Maybe it could be implemented by CSS only:

 img { transition: transform .5s; transform: scale(.5); } img:hover, img:focus { transform: scale(.7); } /* just for styling */ div { height: 100vh; display: flex; align-items: center; justify-content: center; } body { margin: 0; padding: 0; } 

 <div> <img src="https://i.stack.imgur.com/8UkZF.png"> </div> 

Answer 2

You can adjust the top and left position at the same time as you enlarge.

-1rem seems to fit nicely.

 let image = $('#navigation_bar img'); $('#menu-item-948').hover(function() { // alert("top :"+position.top +" left : "+ position.left +" right: "+ position.right +" bottom: "+ position.bottom); $(image) .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-6.png") .animate({ width: "5rem", height: "5rem", top: "-1rem", left: "-1rem" }, 150); $('#menu-item-948').append('<p id="text" >text</p>'); $('#text').css('color', '#55EA00'); }, function() { $(image) .attr("src", "https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png") .animate({ width: "2.5rem", height: "2.5rem", top: 0, left: 0, }, 300); $('#text').remove(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="flex-col hide-for-medium flex-center" style="margin-left: 50%; margin-top: 10%"> <ul id="navigation_bar" class="nav header-nav header-bottom-nav nav-center nav-divided nav-uppercase text-center "> <li id="menu-item-948" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-948"> <a href="https://matiloos.dts.company/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.company/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a> </li> </ul> 

Answer 3

That is because you aren't actually zooming but increasing the height of the container. I would suggest a different approach in CSS3;

let image = $('#navigation_bar img') ;

$(document).ready(function () {
    $('#menu-item-948').hover(function () {
        $(image).addClass('zoom-in');
    },function () {
        $(image).removeClass('zoom-in');
    });
});

CSS:

.your-image-element {
   -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
     -ms-transform-origin: center center;
      -o-transform-origin: center center;
       transform-origin: center center;
   -webkit-transform: scale(1);
    -moz-transform: scale(1);
     -m-transform: scale(1);
      -o-transform: scale(1);
   transform: scale(1);
   -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
}

.your-image-element.zoom-in {
   -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
     -ms-transform: scale(1.15);
      -o-transform: scale(1.15);
       transform: scale(1.15);
   -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
}

Read about transform

Read about transition

Read about transform-origin