CODEWITHSUNDEEP
csshoverbackground-image
Sjrsmile
Sjrsmile

Reputation: 253

hover img over background-image css

I have an image set as a background like so

.about {
    height: 351px;
    background-image:url("../images/about.png");
    background-position:center;
    background-repeat:no-repeat;
}

And I'm trying to user :hover

.about:hover {
    background-image:url("../images/hover.png");
}

to display another image over the top. I want the original picture to still be there as the hover image has transparency.

This way replaces the image, is there a way to not replace it but just hover over the original image?

Upvotes: 2

Views: 1227

Answers (2)

charltoons
charltoons

Reputation: 2001

You need a mask, or an element inside your .about element (or positioned absolutely over it). The mask has the hover image as its background, but has visibility:hidden. Then, when the .about element is in hover state, it activates the mask. .about:hover .about-mask {visibility: visible;}. Pro tip: using visibility:hidden instead of display:none allows the browser to load the image, even though its not visible, so you wont have any flickering.

http://jsfiddle.net/nDHbD/

Upvotes: 3

R Lacorne
R Lacorne

Reputation: 604

You could place a div above the .about one, then have it display it's image on :hover, that way, both images would show. Even better, you could animate a transition on your new div so it goes smoothly.

Upvotes: 2

Related Questions