Effect for image on mouseover

look this:

When the pointer is on the image I want a small dark开发者_如何学运维 rect at the bottom of this image with some text. How can I do this? Maybe with jquery?

Thanks guys.

You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.

HTML:

<div class="image_hover"><span>Text</span></div>

CSS:

.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }

You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.

You could also use jQuery to either add or show the div onmouseover.

Yeah, you can easily use jquery to achieve that. If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins