WordPress：对其他图像对象使用现有的图像悬停效果答案

【问题标题】：WordPress: Using existing Image-Hovereffect for other image objectsWordPress：对其他图像对象使用现有的图像悬停效果
【发布时间】：2021-12-24 19:26:18
【问题描述】：

我正在尝试建立一个新网站。工作快完成了，但我需要最后一个细节。我正在使用带有拇指/标题和链接功能的网格来详细站点。

我想用一些悬停效果可视化链接功能（由我的模板提供）。

这是项目站点的链接 - 我正在主页上寻求帮助：

https://emc.ow-media.de/

如果您将文档的拇指或页面末尾的三个链接的拇指悬停，您可以看到悬停效果。我也想在顶部的网格元素（6 个拇指）上使用此效果。

您能否给我一个提示，如何使用 CSS 来实现它？

非常感谢！

【问题讨论】：

标签： css wordpress hover

【解决方案1】：

你已经有样品了。如果你检查元素，你可以看到它是如何工作的。底部元素使用的代码如下：

CSS：

figure.sc_image a {
    content: '';
    width: 100%;
    display: block;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
figure.sc_image a {
    background-color: rgba(50,172,121,0.8) !important;
}
figure.sc_image a:hover {
    opacity: 1;
}

HTML：

<figure class="sc_image  sc_image_shape_square">
  <img src="https://emc.ow-media.de/wp-content/uploads/2021/06/Leistungen-Potentialanalyse1.jpg" alt="">
  <a class="img_icon icon-file-pdf" href="http://emc.ow-media.de/was-wir-tun-detail"></a>
</figure>

基本上发生了什么，是有一个不可见元素a，设置不透明度为0。当有人悬停该元素时，它将不透明度设置为1。动画由transition属性完成，这缓解了不透明度的变化。您可以模仿其他元素的效果。

【讨论】：

谢谢。我已经尝试为没有悬停效果的 6 个图像元素添加 CSS。但我不知道如何解决它们？我检查了诸如“element element_1613576190161 thumb”之类的名称 - 但我找不到使用 CSS-Addition 处理对象的方法。你能在这里给我一个提示吗？谢谢！
.grid-items .layer-wrapper a 但是，您的 HTML 布局与预期的 HTML 不匹配。
“匹配预期的 HTML”是什么意思？你能告诉我下一步如何让悬停效果发挥作用吗？
您的 HTML 结构应该与答案中的结构相匹配。否则，您必须更改 CSS，它可能无法达到预期的效果。