CSS sliding effect won't work in Chrome? - css

Question

I have this code which works fine in Firefox and IE, but not in Chrome. What it does is, it starts a slide image animation, over existing image when the cursor is on it. Is there any part of the code that Chrome does not support?
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper">
<img src="icon1.png">
<a href="http://www.somesite.com" target="_blank">
<img id="slide" src="slide_img.png" />
</a>
</div>
</div>
</td>
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
}
#slide{
position: absolute;
left: -197px;
width: 197px;
height: 162px;
background: transparent;
transition: 0.5s;
}
.wrapper:hover #slide {
transition: 0.3s;
left: 0;
}

Answer 1

The problem was in the first image in the wrapper. Try providing a bacground to the div rather than using the img tag
Fiddle
Modified html
<td width="214">
<div style="margin-left:19px; margin-top:-8px">
<div class="wrapper" >
<a href="http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg" target="_blank">
<img id="slide" src="http://3.bp.blogspot.com/-9qLJXsHoVag/T_rA4WlE-PI/AAAAAAAAB0I/I4gHxidRYEY/s320/kaka.jpg" />
</a>
</div>
</div>
</td>
and css
.wrapper{
position: relative;
overflow: hidden;
width: 197px;
height: 162px;
background:url('http://www.biography.com/imported/images/Biography/Images/Profiles/K/Kaka-559558-1-402.jpg')
}

Answer 2

You need to give Prefix for this
.cssname
{
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}