DIV与文本在悬停的图像上 [英] DIV with text over an image on hover

问题描述

好的首先，这与 http://dribbble.com 主页非常相似。

OKay first off this is really really similiar to the http://dribbble.com homepage.

以最简单的形式。我有一个图像，我正在尝试CSS它，所以当我将鼠标悬停在图像上时，DIV会显示一些文字和部分透明的背景颜色。

In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.

我不知道该怎么做..

I have no idea how to do this..

推荐答案

如果你想获得的是一个像Dribbble页面那样的效果，那么你不需要在 img 上创建一个 div 。

If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.

图像的2个版本就足够了，一个是正常的，一个是去饱和的，并且亮度增加了（或类似的东西，给人一种透明度的印象）。

It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").

现在您创建一个以图像为背景的div，在鼠标悬停时切换背景并添加文本。
在mouseout上你还原了更改。

Now you create a div with the image as background and on mouseover you switch background and add the text. On mouseout you revert the changes.

编辑：当然在实践中你会动态分配图像名称（例如用PHP ），但这是另一个故事。您甚至可以使用GD库自动生成透明图像。

Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.

一个小例子：

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>

这篇关于DIV与文本在悬停的图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！