CSS3 tansition with background-position

Question

I put small images into a large image and use background-position to set the position of the small image in the large one.

../img/nav_left.png

When #nav_left_home is onhover, the background image position is changed from 0 32px to be 0 0.

#nav_left_home {
    background-position: 0 32px;
    background-image: url('../img/nav_left.png');
    transition: background-image 0.5s ease-in-out;
}

#nav_left_home:hover {
    background-position: 0 0;
}

With the above code, the red house would move up when onhover and the white house will appear under the red house and move up until replace the position.

But I only want to change the color of the image (no moving in position) as in the way color changes with transition.

possible duplicate of [CSS3 Background image Transition](http://stackoverflow.com/questions/9483364/css3-background-image-transition) — Oleg Mikheev, Feb 14 '14 at 07:53
@OlegMikheev it's not a duplicate. When you are using sprites, transitioning the change you make the movement visible. You can not get a fade in . — vals, Feb 14 '14 at 08:04
you can split the image as two part and one part called in #nav_left_home and another part call on #nav_left_home:hover... — Krish, Feb 14 '14 at 08:20
above code will not move the background image .. to move the background image you have to use `transition: background-position 0.5s ease-in-out;` not `background-image` now what you want fadeIn fadeOut effect?? — Deepak Sharma, Feb 14 '14 at 08:33

score 0 · Answer 1 · answered Feb 14 '14 at 07:53

The only way I know to achieve this is to slice your image as a "mask" and use CSS to transition between different background colors. By mask, I mean the color portion of your icon would be left transparent to form a kind of cutout that lays on top of a solid background color.

score 0 · Answer 2 · answered Feb 14 '14 at 08:02

You need to show both images at the same time, and fade between the 2.

To get this, you need to set the alternate image in a pseudo element, initially transparent:

#nav_left_home {
    background-position: 0 32px;
    background-image: url('../img/nav_left.png');
    transition: background-image 0.5s ease-in-out;
}

#nav_left_home:after {
    content: "";
    left: 0px; 
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-position: 0 0;
    background-image: url('../img/nav_left.png');
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#nav_left_home:hover:after {
    opacity: 1;
}

CSS3 tansition with background-position

2 Answers2