wordpress - WordPress 画廊悬停动作

Question

我正在制作一个作品集，并希望画廊只包含纯色盒子。此外，它上面会有一个图标，表明它是什么类型的项目（例如印刷、网络等）。我想要发生的是，当您将鼠标悬停在其中一个框上时，纯色会更改为项目的预览，例如图片。当鼠标悬停在框上时，该图标应保留。

如果由于我的英语不好而无法理解，我制作了一个图形来可视化我想要的动作（红色方块处于悬停模式）：

有人可以尝试指导我吗？

Answer 1

这不再是一件非常困难的事情，但它需要一些 CSS3 技能。还有一些可用的 Wordpress 插件（例如，尝试在 Wordpress 插件站点中搜索 Hover Image）和/或包含类似功能的主题，您可能希望开始使用这些功能，然后根据您的目的进行调整。但最后，您基本上需要查看以下 CSS：

• ：徘徊
• 立场：绝对
• z-index

请参阅Wordpress.org上的此讨论，了解从哪里开始。您实际上并不需要此处讨论的 :after 标记。我只使用 :hover 属性做了类似的事情。诀窍是创建一个包含所有内容（包括您想要出现的图像）的外部 div，然后使用带有 z-index 的“位置：绝对”CSS 将项目堆叠在一起。使用 :hover 属性将堆栈“顶部”上的任何项目的不透明度更改为较轻的不透明度，从而导致底层项目通过顶层显示。

CSS 可能如下所示：

.gallery1 {width: 280px; height: 178px; display: inline-block; float: left; margin: 5px}
.gallery1 img {position: absolute; z-index: 1}
.gallery1 div {position: absolute; opacity: 1; z-index: 2; height: 178px; width: 280px; text-align:center; vertical-align: middle; line-height: 178px; margin: 0px; padding: 0px; font-family: Arial; font-size: 14pt; background-color: rgb(255, 245, 130)}
.gallery1 div:hover {opacity: 0.3}

HTML 看起来像：

<div class='gallery1'>
<img src='whatever.jpg'>
<div>Text or code for icon here</div>
</div>

这个想法是通过使用 position:absolute 将 img 固定在 gallery1 div 中，然后通过 z-index 将其设置为低于文本或图标所在的 div 的值。带有图标的 div 也是 position:absolute 并赋予更高的 z-index 以便它堆叠在图像的顶部，并且它具有固定的高度/宽度设置以匹配图像大小。接下来，它被赋予不透明度 1 和背景颜色，以便它覆盖或隐藏图像。通过使用 :hover 样式，这种不透明度降低了，允许图像显示出来。