eBay on hover CSS code for images to zoom and pan in the center of the web page

Question

I'm trying to integrate eBay's great zoom and pan on hover for images into my CSS code. So far, I've managed to zoom into the image without regards of placement and without it panning while the cursor hovers over the image. eBay has a great working code which I'd love to incorporate into my own CSS sheet.

This is what I have so far...

div.product div.gallery img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  display: inline-block;


}

div.product div.gallery img:hover {
  transform: scale(2.10);
    -o-transform: scale(2.10);
    -ms-transform: scale(2.10);
    -moz-transform: scale(2.10);
    -webkit-transform: scale(2.10);
transition:transform 0.75s ease;

I was looking into eBay's style sheets, but they have several with so much code. I was overwhelmed. Can anyone more advanced help me out with that code I'm missing? Thank you so much! :)

Answer 1

You need to hide overlapping parts of the image when it's size is increased. I updated your code snippet. I would also recommend to add the transition on the img, not the :hover.

div.product div.gallery {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

div.product div.gallery img {
  max-width: 100%;
  max-height: 100%;
  transition: transform 0.25s ease;
}

div.product div.gallery img:hover {
  transform: scale(2);
}

<div class="product">
  <div class="gallery">
    <img src="https://i.imgur.com/uBjSQgP.png" alt="">
  </div>
</div>

---

Second, if you want to recreate the Image Zoomer (Pan Zoom) then you will need to use a javascript plugin to recreate this. I did some research and found some interesting candidates that could help you:

• http://www.elevateweb.co.uk/image-zoom/examples
• http://www.jacklmoore.com/zoom/
• https://github.com/timmywil/jquery.panzoom