CSS3 Issue with transition - html

Question

So I am having trouble getting the transition to work here, on hover works to switch the images, and I have used this transition another site and works just fine when used on the same machine and browser however on this site I am building currently the transition is not having it.... Here is the HTML& CSS
<div class="grid_4">
<h3 class="foot">
Say Hello!
</h3>
<h3 class="descripfoot">
<div class="grid_2">
<a class="testicon" title="flickr Link" align="left" href="http://www.flickr.com"></a>
</div>
some description text goes hereeeee
</h3>
</div>
a.testicon
{
background: url("../images/testicon.png");
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
}
a.testicon:hover,a.testicon:focus,a.testicon:active
{
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
-webkit-transition: background .3s linear 0s;
-moz-transition: background .3s linear 0s;
background: url("../images/testicon2.png");
}

Answer 1

This works fine for me: http://jsfiddle.net/LWsVt/2/
a.testicon
{
background: url(http://lorempixel.com/200/200) center center no-repeat;
background-size: 200px 200px;
width:140px;
height: 140px;
border-radius: 7px 7px 7px 7px;
display: inline-block;
-webkit-transition: background .3s linear 0s; /* obviously declare all vendor prefixes here */
}
a.testicon:hover,a.testicon:focus,a.testicon:active
{
background-image: url(http://lorempixel.com/400/400);
outline:none;
}​
Note I simplified the CSS and got rid of redundant property declarations.