css background image clip - css

Question

Im setting my image src in php and controlling the styling in css. I have an image sprite but no matter what I do the image does not seem to clip to the area I want. Im just getting the whole image appear dispite my background-size being set to 24 by 24px.
Note that the img src has to stay in the HTML rather than moving to a bg-image in the css :)
A jsfiddle can be seen here
jsfiddle.net/s6UnV
Any ideas?
#swap li img {
background-position: 0 0px;
background-size: 24px 24px;
display: block;
text-indent: -10000px;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
#swap li img:hover {
background-position: 0 -24px;
}

Answer 1

You shouldn't use the tag img for sprites, you should use a div with a background-image to the one you would like to add the sprite effects.
I updated your jsFiddle here Updated jsFiddle
What i did was the following
Changed the Html to
<ul id="swap">
<li>
<a href="www.google.com" target="_blank">
<div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
</div>
</a>
</li>
</ul>
And added the fb-sprite class style to the css
.fb-sprite{
width:24px;
height:24px;
background-position: 0 0px;
background-size: 24px 48px;
display: block;
-webkit-transition: background-position .6s;
-moz-transition: background-position .6s;
-o-transition: background-position .6s;
-ms-transition: background-position .6s;
transition: background-position .6s;
}
.fb-sprite:hover{
background-position: 0 -24px;
}
Hope it helps
ps: you can also use the opacity effect on this one so the facebook logo doesn't disappear
out of the blue, just a suggestion.
Cheers.
EDIT: Now you can change the url of the img programtically and the style would work. Also Updated the jsFiddle