CODEWITHSUNDEEP
imagehoveroverlay
SteveyM
SteveyM

Reputation: 7

Image div + text on hover

Hey guys Im just wondering how to do a hover on image and fade the image a colour with opacity 0.5. also with centered text. I know a bit how to do it I'm just not sure if its purely css possible or jquery is required? Thanks guys for help on this.

Upvotes: 0

Views: 1742

Answers (1)

happyhuman
happyhuman

Reputation: 294

Like this:

http://jsfiddle.net/YgMLn/4/

<img src="http://i.imgur.com/o7iAFMu.jpg" width="100px" class="test"/>

.test:hover {
    opacity: 0.5;
}

Where do you want the text to go?

Edit in response to comment:

I think then you need to wrap the image in a container div.

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

#container:hover {
    background: yellow;
    opacity: 0.5;
}

If you want the image centered you can apply text-align:center to the container div or if you want text overlaid on top of the image centered I would suggest then making the image a background of the container div. Let me know exactly what you want... Post a sample if you can or create a fiddle. thanks.

Edit in response to comment.

Please see if this would work: http://jsfiddle.net/L8xhA/4/

Upvotes: 1

Related Questions