Sprite Not Dissolving

HTML & CSS
1

Hello all,

I just found out about sprites a few days ago and realized how much of an improvement it would be if I start using sprites.

Now I’m trying to use a sprite to get the “hover” image (bottom part of sprite) to dissolve (using opacity) into the “original” image (top part of sprite), but all it does is display the “original” image.

Here is the fiddle.

And the CSS:

#test .hello {
    width: 446px;
    margin: 25px 20px 30px 50px;
    float:left;
    background:url('http://3.bp.blogspot.com/-SB9PwM8KARw/TWeqms7WySI/AAAAAAAAAAU/mRAQfBNWP8c/s1600/SmileyFace.png');
}
#test .hello a {
    display:block;
    height:156px;
    text-indent:-9999em;
    background-position: 0 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    opacity: 0;
}
#test .hello a:hover, #test.hello a:focus {
    background-position: 0 -156px;
    opacity: 1;
}

And the HTML:

<div id="test">
        <div class="hello"><a href="test.html">Test</a></div>
</div>

In another attempt, I tried doing this without the dissolve, but instead of replacing the “original” image with the “hover” image, it just moves the image up!

Here is the fiddle for this second attempt.

And the CSS:

#test .hello a {
    width: 446px;
    margin: 25px 20px 30px 50px;
    float:left;
    background:url('http://3.bp.blogspot.com/-SB9PwM8KARw/TWeqms7WySI/AAAAAAAAAAU/mRAQfBNWP8c/s1600/SmileyFace.png');
    display:block;
    height:156px;
    text-indent:-9999em;
    background-position: 0 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    /*opacity: 0;*/
}
#test .hello a:hover, #test.hello a:focus {
    background-position: 0 -156px;
    /*opacity: 1;*/
}

And the HTML:

<div id="test">
        <div class="hello"><a href="test.html">Test</a></div>
</div>

Does anyone know what I am doing wrong here?

Thanks!

  • Pam
2

Yes, that’s because you are using transitions, which don’t play well with sprites. Browsers seem to handle the transitions differently. It’s early days with CSS3, I’m afraid. Probably the best thing to do here is forget about the transition, or resort to JS if you really must have it. :slight_smile:

3

Thanks Ralph!

CSS is quite intriguing, indeed!

I guess this explains why the sprites + transitions I did see like this utilized JS for their transitions. The foremost reason I wanted to use sprites here is because:

Is there a way to avoid this first-time delay besides using sprites?

4

Could you pre-load the rest of the sprite using JavaScript on page load? Then when the sprite transition occurs it should be seamless?

Asking because I don’t know if this would work, sounds good in theory though.

5

Thanks cpradio! Here is a way I found to do it with CSS instead of JavaScript:

#something:before
		{content: url("./img.jpg");
		 width:0;
		 height:0;
		 visibility:hidden;}

Source

I’m not sure whether or not this is the best way.

6

I, yes, that would be the same concept I was thinking of, just pure CSS. Good idea :slight_smile:

7

For some reason, the one I have above is actually not working for me, whereas the following one is working for me:

CSS:

.hidden {
	display:none;
}

HTML:

<div class="hidden">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>

Source

8

@Pamela1991,

Can you provide the url to the image you are trying to pre-load? I’d like to see if I can help resolve your pre-load issue and run a few tests to see why the CSS :before didn’t work. Also, what browser are you using for testing?

9

Thanks cpradio.

I am testing it locally on Firefox 13.0.1 and Google Chrome 19.

I tried to recreate this scenario in jsfiddle, but for some strange reason, on jsfiddle images are automatically pre-loading by default in jsfiddle–even without :before.

10

Interesting, I used img.jpg and saw in Chrome Developer Tools (Network section) that it did indeed try to pull down the img.jpg file during the page load, so I am not sure why that didn’t work using :before

11

Hi,

I’d just stack the separate images on top so they always get preloaded.

Here’s a live example.

The image is shimmed underneath the default one and and set to opacity:0 so you can use transparent images.

On hover opacity is swapped and as the images are not in the same parent there is no problem reversing the opacity.

12

My mistake, it does work using :before!

It turns out I was accidentally loading up the original image in :before instead of the hover image!

And thanks for letting me know about Chrome Developer Tools–it is very handy. Before you told me about it, I had only been using Web Developer and Firebug on Firefox.

Do you know if there is somehow a way to load up multiple images within the same element? For instance, the following CSS snippet does not work because the last one (img3) replaces any previous content that came before it in that element:

#something:before {
                 content: url("..images/img1.jpg");
                 content: url("..images/img2.jpg");
                 content: url("..images/img3.jpg");
		 display:none;
}

Or would I have to have one element per image? Like this:

#something1:before {
                 content: url("..images/img1.jpg");
		 display:none;
}
#something2:before {
                 content: url("..images/img2.jpg");
		 display:none;
}
#something3:before {
                 content: url("..images/img3.jpg");
		 display:none;
}

Thanks!

13

Thanks Paul!

That works brilliantly!

14

Hi,

You can use multiple background images with css3 on a single element.

However, you should remember that most browsers will only display a background image when it is called for on the page. If you set it to display:none or visibility:hidden the browser probably won’t load it until you show it on the page with display:block and then it will get loaded (browsers do vary on this though). Moving images off screen is probably a better approach but some browsers may be clever enough to know that the image is off screen and therefore not load it until it comes on screen. The most reliable method is to make sure the image is on screen to start with in some manner (such as a sprite or stacking on top as in my example).

15

Thanks Paul! That makes sense now. Your approach was more efficient than what I had been trying to do.