WordPress的画廊悬停行动

Question

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

如果是这样的，因为我的英语不好无法理解的，我做了一个图形可视化所需的我的动作（红色广场上悬停模式）：

任何人都可以请尽量指引着我？

Answer 1

这不再是一件非常困难的事情，但它需要CSS3的一些技巧。还有一些Wordpress插件可用（例如，尝试在Wordpress插件网站中搜索Hover Image）和/或包含类似功能的主题，这些功能可能需要先着手，然后针对您的目的进行调整。但最终，你基本上需要考虑下面的CSS：

• ：悬停
• 位置：绝对
• 的z-index

为的想法见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> 

的想法是，通过使用位置：绝对的IMG是gallery1专区内固定在位，然后通过z-index将其设置为比文本或图标所在的div更小的值。带图标的div也是位置：绝对位置，并给出更高的z-index，以便它在图像顶部堆叠，并且它具有固定的高度/宽度，以匹配图像大小。接下来给它一个不透明度为1的背景色，以便遮盖或隐藏图像。通过使用：悬停样式，可以降低这种不透明度，从而让图像显示出来。