Question

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

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..

Answer 1

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.

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”).

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.

EDIT: 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.

A little example:

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>