CODEWITHSUNDEEP
javascripteffectsonmouseover
Joaquin McCoy
Joaquin McCoy

Reputation: 523

Effect for image on mouseover

look this:

alt text

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.

Upvotes: 0

Views: 871

Answers (2)

jthompson
jthompson

Reputation: 7266

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.

Upvotes: 3

bcosynot
bcosynot

Reputation: 6013

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

Upvotes: 1

Related Questions