0

我正在尝试将 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 的样式表，但他们有几个有这么多代码。我不知所措。任何更高级的人可以帮助我解决我缺少的代码吗？太感谢了！:)

4

1 回答 1

3

当图像尺寸增加时，您需要隐藏图像的重叠部分。我更新了你的代码片段。我还建议在 上添加过渡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="http://placehold.it/500/500" alt="">
  </div>
</div>

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

于 2017-08-16T04:26:46.803 回答