CSS Transition not working on hover - html

Question

I am having an issue. When I hover over the image, a dark overlay appears but CSS Transition property is not working on it.
Here is the html:
<div class="col-md-12">
<div class="collection-category">
<img src="http://dummyimage.com/600x400/#C1C1C1/fff" />
<a href="#">
<div class="overlay_wrap">
<div class="overlay">
<h2 class="collection_title">Headline One</h2>
</div>
</div>
</a>
</div>
</div>
And CSS is:
.collection-category {
display: block;
overflow: hidden;
margin: 10px 0;
position: relative;
}
.collection-category img {
width: 100%;
max-height: 250px;
}
.collection_title {
display: table-cell;
vertical-align: middle;
font-size: 28px;
}
.overlay_wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.overlay {
display: none;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
display: table;
height: 100%;
width: 100%;
}
Here is the JSFiddle
http://jsfiddle.net/cnbvoe32/
Any help would be highly appreciated.
thanks in advance.

Answer 1

It's because you can't transition from display: none to display: table.
Instead, you could transition the opacity property by setting the initial display to table along with opacity: 0 and then transitioning to opacity: 1:
Updated Example
.overlay {
display: table;
background: rgba(2, 2, 2, 0.61);
color: #FFF;
text-align: center;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
}
.collection-category:hover>a>.overlay_wrap>.overlay {
opacity: 1;
}