Css hover on image - load a div

Question

I would like to do a CSS effect on hovering an image.

I'd like to show a div containing content like text when I hover on an image.

So I'd like to do something with this code:

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

<div id="hover">Test message</div>

I have tried to hide the "hover" div in css display and on hover I tried to set the display to block, but its not working...:(

EDIT: I want the text on the image. When I hover the image it should get some opacity BUT the text should not recieve that opacity!

IS there any method to do this?

Answer 1

http://jsfiddle.net/ZSZQK/

#hover {
    display: none;
}

#image:hover + #hover {
    display: block;
}

Just keep it simple, no need to change your markup.

---

Update

If you want to change opacity of image on mouse hover, then http://jsfiddle.net/ZSZQK/4/

#hover {
    display: none;
    position: relative;
    top: -25px;
}

#image:hover {
    opacity: .7;
}

#image:hover + #hover {
    display: block;
}

---

Update 2

Since you added a couple of more requirements to your initial question, now it requires a change in the original html markup.

I am assuming you are using html5, and if so, you should use the tags appropriated for your content's context:

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

and the css

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}

jsFiddle