将鼠标悬停在缩略图上并覆盖透明放大镜图像
Hover over thumbnail image and overlay with a transparent magnifier image
首先,我正在使用 Volusion。这是我网站类别页面的示例:http://www.gtsimulators.com/Somso-Models-s/87.htm
因此,如果您对 Volusion 足够熟悉,就会知道它的自定义功能非常有限。这是我无法弄清楚的事情:
当悬停在类别的缩略图上时,我需要添加一个带有透明放大镜的叠加图像(请检查上面的 link),以便访问者知道点击图像会采取行动。我知道它只能用 CSS 制作,但我不确定要拉哪个 类 或 ids。
我知道这看起来像是一个已经回答过的问题。但由于我们专门讨论 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;
}
如果您对如何实现它有任何其他建议,我将不胜感激。
如果需要,我很乐意提供更多信息。
请帮忙。谢谢!
这是一个实现方法的示例: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;
}
好的。我在四处乱逛,然后用 :after 找到了答案。
这是我用于达到预期效果的代码:
.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;
}
首先,我正在使用 Volusion。这是我网站类别页面的示例:http://www.gtsimulators.com/Somso-Models-s/87.htm
因此,如果您对 Volusion 足够熟悉,就会知道它的自定义功能非常有限。这是我无法弄清楚的事情:
当悬停在类别的缩略图上时,我需要添加一个带有透明放大镜的叠加图像(请检查上面的 link),以便访问者知道点击图像会采取行动。我知道它只能用 CSS 制作,但我不确定要拉哪个 类 或 ids。
我知道这看起来像是一个已经回答过的问题。但由于我们专门讨论 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;
}
如果您对如何实现它有任何其他建议,我将不胜感激。
如果需要,我很乐意提供更多信息。
请帮忙。谢谢!
这是一个实现方法的示例: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;
}
好的。我在四处乱逛,然后用 :after 找到了答案。 这是我用于达到预期效果的代码:
.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;
}