将鼠标悬停在缩略图图像上并用透明放大镜图像覆盖

Question

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

所以，如果您对Volusion有足够的熟悉程度，那么您会知道它对于定制非常有限。这是我无法弄清楚的事情：

当鼠标悬停在缩略图图像的类别上时，需要使用透明放大镜添加叠加图像（请检查上面的链接），以便访问者知道点击图片将采取行动。我知道它可以用CSS来完成，但我不确定要拖拽哪些类或ID。

我知道它看起来像一个已经回答的问题。但是由于我们专门讨论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> 

我已经实现的不透明度和它的边界。但我需要放大镜的叠加图像。如果您可以通过回答我网站上的课程和ID的确切结构来帮助我，那将是完美的。

这里是一块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样式，以便在加载时隐藏并在悬停时显示它...但该选项可能有点儿奇。

HTML

<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; 
}