Best way to display a transparent image over a content image on hover?

Question

I am working on a graphical navigation menu which uses square images for the initial state, each image also has an icon centered vertically and horizontally on each image. I am trying to figure out the best way to do the hover state(where the icon that is centered changes colors and adds a drop shadow). Originally what I did was I saved the images in 2 states as jpg images. The effect I received from this was not desired because there was a split second on initial hover where the image would disappear while the hover image was loading.

So then I decided it would probably be best to keep the initial state image a solid jpg and then use a transparent background image of just the icon with the hover state.

Basically, I am wondering what the best way to code this would be. My initial thought was to use an img tag wrapped in a span to display the initial state jpg and then set a background-image on the span hover state through CSS. However, I am running into issues where I can't get the background image to appear above the image that is embedded in the content(I've tried using z-index to no avail).

Can anyone suggest what the best way to go about this would be?

Here is my code from what I've tried so far:

<div class="nav">
    <div class="frame facts"><span><img src="img/layout/nav/facts.jpg" /></span></div>
    <div class="frame tips"><span><img src="img/layout/nav/tips.jpg" /></span></div>
    <div class="frame events"><span><img src="img/layout/nav/events.jpg" /></span></div>
    <div class="frame community"><span><img src="img/layout/nav/community.jpg" /></span></div>
    <div class="frame about"><span><img src="img/layout/nav/about.jpg" /></span></div>
    <div class="frame donate"><span><img src="img/layout/nav/donate.jpg" /></span></div>
</div>

And the CSS:

.nav .frame {
    width:calc(100% / 6);
    height:163px;
    float:left;
    cursor:pointer;
    position:relative;
}
    .nav .frame img {
        z-index:5
    }
    .nav .frame.facts span:hover {
        background:url('../img/layout/nav/facts_over.png'); /*Transparent hover state icon*/
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index:1000
    }

Thanks!

Answer 1

If you only need to change a single color, you could use a png with transparency for the portions that change, and set the background color of the image so it could 'bleed' through the transparent portions of the image.

Another option would be to use an image sprite the navigation elements, meaning you would merge your navigation buttons and states into a single large image and manipulate the background-position of the element so the correct portion is visible for the appropriate state.

Here's a guide to using sprites: http://css-tricks.com/css-sprites/