css avoid slide in transition on hover - html

Question

how to avoid slide transition in social icons on hover?
i want my all social icons in one png file and use transition also but it show up with sliding it not transition like two different images
#social_icons {
display:inline-block;
background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
background-position: 0px 0px;
width: 150px;
height: 175px;
transition: 0.5s ease, forward;
border: 1.5px solid blue;
margin:10px;
}
#social_icons:hover {
background: url(http://www.gobothell.com/wp-content/uploads/2012/01/FB-and-Twitter-icons-300x181.jpg) no-repeat center center;
background-position: -150px 0px;
width: 150px;
height: 175px;
}
#social_icons2 {
display:inline-block;
background: url(http://www.florestrekkingtour.com/userfiles/images/FB_icons.png) no-repeat center center;
width: 200px;
height: 200px;
transition: 0.5s ease, forward;
border: 1.5px solid blue;
margin:10px;
}
#social_icons2:hover {
background: url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside-facebook.png) no-repeat center center;
background-position: 0px 0px;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
h2 {
background:rgba(0, 0, 0, 0.7);
color:yellow;
text-align:center;
text-shadow:0px 0px 10px lime;
margin-top:45%;
}
1 image
<div id="social_icons"><h2>Hover me</h2></div>
2 images
<div id="social_icons2"><h2>Hover me</h2></div>

Answer 1

This is not possible with CSS3 Transitions with a single element, the property your transitioning(changing) is background-position, hence the reason it appear sliding,
If a Fade In/Fade Out effect is what you require, you could use a CSS3 Animation to fade the element out on hover, move it to the desired background position then fade back in the new image.
If a Cross-fade is what you require there is either background-image: cross-fade()
background-image: cross-fade(url("logo-box.png"), url("logo-bare.png"), 50%);
But it has very limited browser support i.e. http://caniuse.com/#feat=css-cross-fade.
Or probably the best option is using 2 elements and fade out one on top of the other, you could use a Pseudo Element (IE8+) to fake an extra element i.e.
#social_icons:before {
content:"";
display:inline-block;
position:absolute;
opacity:0;
background: url(https://cdn3.iconfinder.com/data/icons/inside/PNG/256x256/icontexto-inside- facebook.png) no-repeat center center;
background-position: 0px 0px;
background-size: 200px 200px;
width: 200px;
height: 200px;
}
See http://jsfiddle.net/sjmcpherso/kr7ec28q/ for working example