悬停在缩略图上，并覆盖透明放大镜图像。

Question

首先，我用的是Volusion。以下是我的网站类别页面的示例：http://www.gtsimulators.com/Somso-Models-s/87.htm

因此，如果您对Volusion足够熟悉，您就会知道它对于定制来说是非常有限的。我很难弄明白的是：

我需要添加一个覆盖图像与透明放大镜时，悬停在缩略图上的类别(请检查上面的链接)，这样访问者就会知道，点击图像将采取行动。我知道它只能用CSS制作，但我不确定要提取哪些类或it。

我知道这看起来像是一个已经得到解答的问题。但是，由于我们具体讨论的是Volusion，它可能会帮助许多使用同一个平台的人。

下面是HTML缩略图的一段代码：(它是自动生成的，我无法编辑)

<div class="v-product">
<a href="http://www.gtsimulators.com/aging-simulation-suit-gert-p/ppd1002.htm" title='Aging Simulation Suit' class="v-product__img">
<img src="/v/vspfiles/photos/PPD1002-1.jpg" style="alt="Aging Simulation Suit"></a>
<a href="http://www.gtsimulators.com/aging-simulation-suit-gert-p/ppd1002.htm" class="v-product__title productnamecolor colors_productname" title="Aging Simulation Suit GERT, PPD1002"> 
Aging Simulation Suit GERT
</a>
</div>

我已经实现了不透明和边界。但我需要一个放大镜的叠加图像。如果你能帮我回答正确的类和ids结构从我的网站，将是完美的。

下面是我已经修改过的CSS片段：

.v-product__img 
{  display: inline-block;  min-height: 170px !important;  text-align: center;  vertical-align: middle;  width: 100%;
}
.v-product__img > img {
border:none !important;
} 
.v-product__img > img:hover {
border:3px solid #DDD !important;
border-radius:5px !important;
margin-top:-3px !important;
opacity:.75;
}

如果你对如何实施它有任何其他的建议，我将不胜感激。

如果需要，我很乐意提供更多的信息。

请帮帮忙。谢谢!

Answer 1

好的。我在闲逛，然后我找到了答案:事后。下面是我为达到预期效果而使用的代码：

.v-product__img:hover:after {content:""; position:absolute; margin:0 auto; width:90px; height:90px; border-radius:90px; top:15px; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.5); 
background-image: url('/v/vspfiles/templates/vws/images/buttons/product-magnifier.png');
background-repeat: no-repeat;
background-position: center; 
transition: all 0.5s;
-webkit-transition: all 0.5s;
opacity: 1;
}

Answer 2

下面是一个这样做的例子：https://jsfiddle.net/68j4u3s7/

条件是您的放大镜图像将是背景图像。您也可以反转它，使实际图像背景图像和放大镜图像img src，更改不透明度到放大镜图像CSS样式，以隐藏它在负载和显示它在悬停.但这种选择可能有点奇怪。

<div id="your-image">
  <img src="http://placecage.com/g/200/300" alt="">
</div>

CSS

#your-image {
  background-image: url('http://placecage.com/c/200/300');
  background-position: 0 0;
  background-repeat: no-repeat;
}

#your-image:hover img {
  opacity: 0.35;
}