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

【问题标题】：eBay on hover CSS code for images to zoom and pan in the center of the web pageeBay 上的悬停 CSS 代码，用于在网页中心缩放和平移图像
【发布时间】：2017-08-16 03:27:51
【问题描述】：

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

【问题讨论】：

你的项目使用 jQuery 吗？
eBay 会阻止我们列表中的活动内容。我不确定我是否可以使用它。

标签： html css hover ebay-design-templates

【解决方案1】：

当图片尺寸增加时，您需要隐藏图片的重叠部分。我更新了你的代码 sn-p。我还建议在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 插件来重新创建它。我做了一些研究，发现了一些可以帮助你的有趣候选人：

【讨论】：

谢谢。我明天试试，然后告诉你。