CSS3 tansition with background-position - html

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.
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.

Answer 1

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.

Answer 2

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;
}