CSS3 - Fade between 'background-position' of a sprite image

Asked 9/4, 2013 at 10:47 Answered 9/4, 2013 at 11:18

Solved css image sprite fade background-position

I want to fade between 'background-position' of a sprite image only with CSS. I found a lot o tutorials but I didn't found something simple like this:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
div{
    width:  120px;
    height: 60px;

    background-image:       url('sprite.jpg');
    background-repeat:      no-repeat;
    background-position:    0   0;

}
div:hover{
    background-position:    0   -60px;
}
</style>
</head>
<body>
<div></div>
</html>

Thank you.

Helper answered 9/4, 2013 at 10:47 Comment(2)

You haven't setup any fades. You can do it either with javascript or css3 animations, depending on how many browsers you wish to support. – Koslo 9/4, 2013 at 10:51

This is a nice article on the topic css-tricks.com/fade-image-within-sprite – Playwriting 15/12, 2020 at 13:52

I found the answer, thanks anyway.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 - Fade between 'background-position' of a sprite image</title>
<style type="text/css">
#button{
    float:                  left;
    background-image:       url('sprite.jpg');
    background-position:    0 -60px;
    background-repeat:      no-repeat;

    width:              120px;
    height:             60px;
}
#button a{
    background-image:       url('sprite.jpg');
    background-position:    0 0;
    background-repeat:      no-repeat;

    width:              120px;
    height:             60px;

    display:            block; 
    text-indent:        -9999px; 

    transition:         opacity 0.3s ease-in-out;
    -moz-transition:    opacity 0.3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out;
    -o-transition:      opacity 0.3s ease-in-out;
}
#button a:hover, 
#button a:focus{ 
    opacity:            0; 
}


</style>
</head>
<body>
<div id="button"><a href="#"></a></div>
</html>

Helper answered 9/4, 2013 at 11:11 Comment(0)

so basically, you need to perform two things upon :hover

background-position change
fadein effect

CSS3 transition won't be useful in this case. You can use CSS3 animation property.

animation property accepts name of the animation and duration. Multiple animation names can be provided separated by comma.

you need to define these animation names.They can be any string of your choice, but you need to define them. so consider this css:

div:hover{
   animation: fadein 10s, bp 0.5s;
   -moz-animation: fadein 10s, bp 0.5s; /* Firefox */
   -webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */
   -o-animation: fadein 10s, bp 0.5s; 
    background-position:0 0;
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes bp { /* Safari and Chrome */
    from {
        background-position:-200px 0;
    }
    to {
        background-position:0 0;
    }
}

see this fiddle, for complete browser supported animation

NOTE: it won't work in IE<9 for sure! and it might in IE9(not sure).

Scimitar answered 9/4, 2013 at 10:55 Comment(1)

this is a slide, not a fading between a background-position of a sprite – Helper 9/4, 2013 at 10:57

You can use CSS3 Animation with @keyframes

div:hover{
  animation: logo 2s 0 linear;
}
@keyframes logo{
  0%   { opacity: 1; }
  5%   { opacity: 0; }
  50%  { background-position: 0 -60px; opacity: 0; }
  100% { background-position: 0 -60px; opacity: 1; }
}

Example: http://jsfiddle.net/Y8W9S/

Of course, now you have to adjust the times and effect you want to implement.

Hope it's helps or point you in right direction.

Good luck.

Pelaga answered 9/4, 2013 at 11:18 Comment(0)

Use like this:

div{
    width:  120px;
    height: 60px;

    background-image: url('sprite.jpg');
    background-repeat: no-repeat;
    background-position: 0   0;
    transition: background-position 1s ease;

}

And don't forget the optional vendor prefixes

Edit:

I've noticed you need fade. You try to similar solution like this:

div{
    background: url(foo.jpg) no-repeat 0 0 transparent;
    transition: background: 1s ease;
}

div:hover{
    background: rgba(0, 0, 0, 1);
}

I can't try this, coz' im from mobile.

Lushy answered 9/4, 2013 at 10:51 Comment(3)

This will slide the bg image, rather than fade it in adn out. – Koslo 9/4, 2013 at 10:51

This isn't fade between position of a sprite image. – Helper 9/4, 2013 at 10:53

The div is transparent and this will show a white page, and on hover will fade to black.... I don't understand what you tried. – Helper 9/4, 2013 at 11:5

Recommended topics

Hot tags