html - eBay 上的悬停 CSS 代码，用于在网页中央缩放和平移图像

Question

我正在尝试将 eBay 出色的缩放和平移图像集成到我的 CSS 代码中。到目前为止，我已经设法在不考虑放置的情况下放大图像，并且在光标悬停在图像上时不进行平移。 eBay 有一个很棒的工作代码，我很乐意将其合并到我自己的 CSS 表中。

这就是我目前所拥有的...

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;

我正在研究 eBay 的样式表，但他们有几个包含如此多的代码。我不知所措。任何更高级的人都可以帮助我解决我丢失的代码吗？太感谢了! :)

Answer 1

当图像尺寸增大时，您需要隐藏图像的重叠部分。我更新了你的代码片段。我还建议在 img 上添加过渡，而不是 :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>

---

其次，如果您想重新创建 Image Zoomer (Pan Zoom)，则需要使用 javascript 插件来重新创建它。我做了一些研究，发现了一些可以帮助您的有趣候选人:

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