CSS3 : Fade in on hover and Fade out when hover is gone - html

Question

I have a div. When I hover on it , it should be appeared using fadeIn effect and when I remove mouse then it should gone using fadeOut effect.
I have tried the below code.
.main_div{
width:100px;
height:100px;
border:thin black solid;
position:relative;
}
.main_div .overlay_div{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
display:none;
background:rgba(0,0,0,0.5);
opacity: 0;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
transition-delay: 1s;
-ms-transition: opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 100ms;
-ms-transition-delay: 1s;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 100ms;
-moz-transition-delay: 1s;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 100ms;
-webkit-transition-delay: 1s;
}
.main_div:hover .overlay_div{
display:block;
opacity: 1;
/* Fade in */
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 100ms;
-ms-transition:opacity;
-ms-transition-timing-function: ease-out;
-ms-transition-duration: 100ms;
-moz-transition:opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 100ms;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 100ms;
}
<div class="main_div">
<div class="overlay_div">
some text
</div>
</div>
Any help would be great.
Thank You.

Answer 1

CSS Transitions don't work on display:block/none; You can manage to give that effect using visibility/opacity properties.
Check this example, You can manually add the transition-delay property if you really want it to add.
.main_div {
width: 100px;
height: 100px;
border: thin black solid;
position: relative;
}
.main_div .overlay_div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transition: all 1s ease-out;
}
.main_div:hover .overlay_div {
visibility: visible;
opacity: 1;
transition: all 1s ease-in;
}
<div class="main_div">
<div class="overlay_div">
some text
</div>
</div>

Answer 2

Code work fine just change display from none to block, as transition doesn't works when changing display.
.main_div .overlay_div{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
display:block;/*Change this*/
......
......
}