悬停时图像上方带有文本的DIV

Question

OKay首先，这真的非常类似于http://dribbble.com主页。

以最简单的形式。我有一个图像，我正在尝试对它进行CSS处理，这样当我将鼠标悬停在图像上时，DIV就会显示一些文本和半透明的背景色。

我不知道该怎么做..

Answer 1

如果您想要获得类似于Dribbble页面上的效果，那么您不需要在img上创建div。

有两个版本的图像就足够了，一个是正常的，一个是去饱和的，随着亮度的增加(或者类似的东西，给人一种“透明”的印象)。

现在，您创建了一个以图像为背景的div，在鼠标悬停时切换背景并添加文本。在鼠标移出时，您可以恢复更改。

PHP EDIT：当然在实践中你会动态分配图片的名称(例如用)，但那是另一回事了。我猜你甚至可以通过使用GD库自动生成“透明”图像。

下面是一个小示例：

CSS:

.squareImg
    {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url("100x100.jpg"); 
    }

.squareImgOver
    {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url("100x100transp.jpg"); 
    }

HTML

<div id="mydiv" class="squareImg" onmouseover="writeText();" 
    onmouseout="eraseText()"></div>

JS

function writeText()
    {
    var d = document.getElementById("mydiv");
    d.className = "squareImgOver";
    d.innerHTML = "something here!";
    }

function eraseText()
    {
    var d = document.getElementById("mydiv");
    d.className = "squareImg";
    d.innerHTML = "";
    }
</script>

Answer 2

这是一个开始。除非您将父对象设为锚点(a)，否则IE6不会执行此操作。

HTML

<div class="container">
    <img src="something.jpg" alt="" />
    <div>some text</div>
</div>

CSS

.container div {
    display: none;
    opacity: 0.7; /* look into cross browser transparency */
}

.container:hover div {
    display: block;
}

Answer 3

@alex，我想他希望文本出现在图片上方，而不是图片下方。有两种方法可以解决这个问题：

1. 将背景添加到包含文本的目录中。
2. 使用背景图像而不是img标记。

我选择1，因为它在语义上更好，对内容承载的图像使用img标记也更便于访问。