SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sprite Not Dissolving

    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:
    Code:
    #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:
    Code:
    <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:
    Code:
    #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:
    Code:
    <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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    instead of replacing the "original" image with the "hover" image, it just moves the image up!
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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:
    Quote Originally Posted by ralph.m View Post
    You could have a separate image appearing on hover, but it doesn't work as well, because there's a delay as it downloads.
    Is there a way to avoid this first-time delay besides using sprites?

  4. #4
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,235
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    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.
    Thanks cpradio! Here is a way I found to do it with CSS instead of JavaScript:

    Code:
    #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. #6
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,235
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    I, yes, that would be the same concept I was thinking of, just pure CSS. Good idea

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pamela1991 View Post
    Thanks cpradio! Here is a way I found to do it with CSS instead of JavaScript:

    Code:
    #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.
    For some reason, the one I have above is actually not working for me, whereas the following one is working for me:

    CSS:
    Code:
    .hidden {
    	display:none;
    }
    HTML:
    Code:
    <div class="hidden">
    <img src="image1.png">
    <img src="image2.png">
    <img src="image3.png">
    </div>
    Source

  8. #8
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,235
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    @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. #9
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    @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?
    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. #10
    Hosting Team Leader silver trophybronze trophy
    cpradio's Avatar
    Join Date
    Jun 2002
    Location
    Ohio
    Posts
    5,235
    Mentioned
    154 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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. #12
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cpradio View Post
    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
    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:
    Code:
    #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:
    Code:
    #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. #13
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Thanks Paul!

    That works brilliantly!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,540
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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. #15
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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).
    Thanks Paul! That makes sense now. Your approach was more efficient than what I had been trying to do.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •