Using "transform: scale()" as zoom function, adding positioning

Question

I would like to use transform: scale() as zoom function. But I also would need to change the position of the zoom with moving the mouse cursor. Would be best if the zoom area is as big as the image.

Some code:

$(document).ready(function() {
  $('img').hover(function() {
    $("img").addClass('zoom');

  }, function() {
    $("img").removeClass('zoom');
  });
});

.image_area {
  width: 50vw;
  height: 50h;
  overflow: hidden;
}

.img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.zoom {
  transition: 0.1s transform linear;
  transform: scale(5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image_area">
  <img id="content" src="https://i.pinimg.com/originals/51/78/75/51787599df00f30466df5a0ba8da9463.jpg">
</div>

So in general, what is missing there: Changing the zoom position with moving the cursor!

Would be very thankful for help! :)

Hey! It should look like the solution from Monzoor Tamal, but without the use of "background-image". :) — Anna_B
– Anna_B, Commented Aug 16, 2020 at 21:02

Monzoor Tamal · Accepted Answer · 2020-08-16 21:15:58Z

1

html

<div class="zoom" onmousemove="imageZoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</div>

css

div.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
div.zoom img:hover {
  opacity: 0;
}
div.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

JS

function imageZoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

UPDATE: Here your code

edited Aug 16, 2020 at 21:15

answered Aug 16, 2020 at 20:34

Monzoor Tamal

8106 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anna_B Over a year ago

Thanks! Is it possible to do it without the background-image? I load the image with jQuery and it's hard to get it twice.

Monzoor Tamal Over a year ago

show me how you load the image with jq. Then i can come up with a solution

Anna_B Over a year ago

That's it in general: jsfiddle.net/xsujcyf5 – and I need the zoom for the lightbox view.

Collectives™ on Stack Overflow

Using "transform: scale()" as zoom function, adding positioning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related