image - 悬停时的图像 div + 文本

Question

嘿伙计们，我只是想知道如何在图像上悬停并将图像淡化为不透明度 0.5 的颜色。也有居中的文本。我知道怎么做我只是不确定它是纯粹的css可能还是需要jquery？谢谢你们在这方面的帮助。

score 1 · Accepted Answer

像这样：

<img src="http://i.imgur.com/o7iAFMu.jpg" width="100px" class="test"/>

.test:hover {
    opacity: 0.5;
}

你想让文本去哪里？

编辑以回应评论：

我认为您需要将图像包装在容器 div 中。

<div id="container">
    <img src="image.png"/>
</div>

#container:hover {
    background: yellow;
    opacity: 0.5;
}

如果您希望图像居中，您可以将 text-align:center 应用于容器 div，或者如果您希望将文本覆盖在居中的图像之上，我建议您将图像作为容器 div 的背景。让我确切地知道您想要什么...如果可以，请发布示例或创建小提琴。谢谢。

编辑以回应评论。

请看看这是否可行：http: //jsfiddle.net/L8xhA/4/

1 回答 1