Wordpress画廊悬停动作

Question

我正在制作一个投资组合，并希望画廊只包含纯色的盒子。此外，它上面会有一个图标，表示它是什么类型的项目（例如打印，网页等）。我想要发生的是当你将鼠标悬停在其中一个方框上时，纯色会变为项目的预览，例如图片。当鼠标盘旋在盒子上时，图标应保留。

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

有人可以试着指导我吗？

Answer 1

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

• ：悬停
• 位置：绝对
• z索引

请参阅Wordpress.org处的讨论，了解可以开始的地方。你实际上并不需要这里讨论的：after标签。我只使用：hover属性做了类似的事情。诀窍是创建一个外部div，它包含所有内容（包括你想要出现的图像），然后使用带有z-index的“position：absolute”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，不透明度为1，因此它会覆盖或隐藏图像。通过使用：悬停样式，降低了此不透明度，允许图像显示。