首先,我使用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;
}
如果你有如何实现它的任何其他建议,我将不胜感激。
如果需要,我很乐意提供更多信息。
请帮忙。谢谢!
很酷的想法。问题是缩略图有不同的高度。所以如果高度是150px,那很好,因为它隐藏了背景图片。但是,如果拇指的高度是25px,背景图像(放大镜)将是可见的。 – Fernando
可以使用透明背景图像进行调整并调整大小...请参阅更新示例:https://jsfiddle.net/68j4u3s7/1/ – howlx5