CODEWITHSUNDEEP
javascriptjquery
Anna_B
Anna_B

Reputation: 890

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

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! :)

Upvotes: 1

Views: 69

Answers (1)

Monzoor Tamal
Monzoor Tamal

Reputation: 810

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

Upvotes: 1

Related Questions