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", "/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", "/wp-content/uploads/2018/11/Asset-5.png")
    .animate({
      width: "2.5rem",
      height: "2.5rem"
    }, 300);
  $('#text').remove();
});

<script src=".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="/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a>
    </li>
  </ul>

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.pany/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.pany/wp-content/uploads/2018/11/Asset-5.png")
    .animate({
      width: "2.5rem",
      height: "2.5rem"
    }, 300);
  $('#text').remove();
});

<script src="https://cdnjs.cloudflare./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.pany/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.pany/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.

• javascript
• jquery
• html
• css

• 2 ..or just use transform:scale (2). Probably easier. – Paulie_D Commented Nov 27, 2018 at 16:12
• You say you don't use position attr, yet there it is : position:relative – fdomn-m Commented Nov 27, 2018 at 16:13

3 Answers 3

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.sstatic/8UkZF.png">
</div>

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.pany/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.pany/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./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.pany/demos/shop-demos/big-sale/" class="nav-top-link"><img id="pic1" src="https://matiloos.dts.pany/wp-content/uploads/2018/11/Asset-5.png" style="position:relative;width: 2.5rem; height: 2.5rem"></a>
    </li>
  </ul>

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