时间戳

首页 > 解决方案 > WordPress：对其他图像对象使用现有的图像悬停效果

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

问题描述

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

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

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

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

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

你能给我一个提示，如何让它与 CSS 一起工作？

非常感谢！

标签： csswordpresshover

解决方案

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

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属性完成，这简化了不透明度的变化。您可以模仿对其他元素的影响。

推荐阅读