CODEWITHSUNDEEP
htmlhoverpositioncss
TheImaginative
TheImaginative

Reputation: 77

Can't get background image to hover over image

I am trying to hover a transparent PNG with a caption over the photo. When I give the divs position: absolute or a specified width the hover dissapears. However if I do not, then the hover displays to the right and the left of the image.

I am clearly doing something wrong but just can't figure out what. Any help would be appreciated.

Thanks!

Here is the site and relevant code.

Website: http://www.theshalomimaginative.com/

<div id= "logo">
 <h3><img src="Graphics/splashpagelogo.png"  alt="The Shalom Imaginative Documentary Photography" /></h3>
</div>


#logo {
position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
}   

h3 {
position:absolute; width:475px; height:365px;display: block;
}

h3:hover {
position:absolute; width:475px; height:365px; display: block; background-image:   url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}

Upvotes: 0

Views: 1019

Answers (4)

user1717480
user1717480

Reputation:

One problem I see right off is you did not close out your tags correctly.

Instead of

</logo>

It should be:

</div>

You can do this instead:

<div id="logo">

</div>

#logo {
    position:absolute;
    width:475px;
    height:365px;
    padding: 0 0 0 242px;
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

} 

#logo:hover {
    position: absolute;
    width:475px;
    height:365px;
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;    
}

http://jsfiddle.net/tech0925/SW7GP/

And if you want to include the h3 tags for SEO purposes you can do this:

<div id="logo">
<h3>Something Here</h3>
</div>

#logo {
    position:absolute;
    width:475px;
    height:365px;
    padding: 0 0 0 242px;
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

} 

#logo:hover {
    position: absolute;
    width:475px;
    height:365px;
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;    
}

#logo h3 {
text-indent: -9999px;
}

http://jsfiddle.net/tech0925/YnMeD/

Upvotes: 3

Jared
Jared

Reputation: 12524

Use a css sprite instead.

Combine both images into one so the images are side by side.

Then instead of using an image tag inside of the h3 only use the h3 tag. On the hover you just need to move the background position over to show the other image in your sprite.

The advantage of using a css sprite is that the user only has to download one image.

HTML

<div id= "logo">
 <h3>The Shalom Imaginative Documentary Photography</h3>
</div>

CSS

#logo {
    position:absolute; 
    width:475px; 
    height:365px; 
    padding: 0 0 0 242px;
}   

h3 {
    background-image: url('yourcsssprite.png');
    position:absolute;
    text-indent: -9999em;
    width:475px; 
    height:365px;
}

h3:hover {
    background-position: -475px 0;
}

Upvotes: 0

dj23
dj23

Reputation: 19

Are you wanting the image to appear over the current image? If so it works this way, I've had to play with the left pixel amounts to get it central:

<div id= "logo">
 <img src="Graphics/splashpagelogo.png"  alt="The Shalom Imaginative Documentary Photography" />
 <div id="overlay">
 <img src="http://theshalomimaginative.com/Graphics/Homepagehover.png"  alt="The Shalom Imaginative Documentary Photography" />
 </div>
</div>


#logo {
position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
}   
#overlay {
    display: none;
    position:absolute; width:475px; height:365px; top: 0; left: 195px; margin-top: 5px;
}
#logo:hover #overlay {
    display: block;
}

Upvotes: 0

Morpheus
Morpheus

Reputation: 9075

Not sure if this is problem, but you don't need to assign same properties to h3:hover, it has to be like this:

h3:hover {
background-image:url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}

Upvotes: -1

Related Questions