-webkit-transition not working on google chrome - html

Question

I've been working on a site and I've encountered a problem with transitions which only only happens in Chrome. Somehow Chrome doesn't want to do the transition which every other browser I use ( Safari, Firefox ) does.
Here's the HTML:
<div class="kategoria_box">
<div class="kategoria_box_header">
<h4>Fürdő</h4>
</div>
<div class="kategoria_box_image">
<a href="termekek/kategoriak/furdo/">
<img src="http://mondano.hu/img/furdo.jpg">
<span class="caption">
<p>Fürdőszoba</p>
</span>
</a>
</div>
</div>
and here's the CSS:
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
-webkit-transition: all 600ms ease-out;
-moz-transition: all 600ms ease-out;
-o-transition: all 600ms ease-out;
-ms-transition: all 600ms ease-out;
transition: all 600ms ease-out;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}
Is something wrong about my code apart from being coded in my own unique style ?

Answer 1

You don't need the webkit- prefix anymore. You forgot to set top:0 for span.caption
http://caniuse.com/#feat=css-transitions
Here's my codepen:
http://codepen.io/dschu/pen/XbwYom
div.kategoria_box_image {
font-size: 1.5em;
font-weight: 200;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
}
div.kategoria_box_image img {
left: 0;
max-width: 460px;
transition: all 600ms ease-out;
}
div.kategoria_box_image .caption {
opacity: 0;
height: 100%;
text-align: left;
padding: 60px 0 0px 0px;
background-color: #fff;
position: absolute;
color: #5d5d5d;
z-index: 100;
transition: all 600ms ease-out;
top: 0;
left: 0;
}
div.kategoria_box_image:hover .caption {
opacity: 0.82;
}