CSS - Gradient transition on hover does work both ways - html

Question

On hover I want to fade in a gradient. I works fine, but on mouse leave there is no transition back. What is wrong, how can I improve the code?
jsfiddle
HTML
<header class="parent">
Hover here!
<div class="child"></div>
</header>
CSS
.child {
height: 100px;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: -1;
opacity: 0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
/* Opera */
transition: all 1s ease-out;
/* Standard */ }
.parent {
height: 120px;
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 100;
opacity: 1 !important; }
.parent:hover .child {
opacity: 1;
background: -moz-linear-gradient(top, #ededed 0%, #ededed 30%, rgba(237, 237, 237, 0) 99%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color- stop(30%, #ededed), color-stop(99%, rgba(237, 237, 237, 0)));

Answer 1

Simply move your background out of the :hover state, onto the .child directly- seeing as you are only animating the opacity of .child this is all that is required. The reason it isnt working at present is also due to the fact you are only listing a single background state, that for hover- when you arent hovering the parent, the background is immediately removed (as no default is present) although the opacity is transitioning- so you see the 'jump'
Demo Fiddle

Answer 2

You have added the bg-gradient to child on hovering only.
Move the background css property to child{ /* background property */ } at default state(mouse leave)
It works good here http://jsfiddle.net/nvishnu/4paLf352/16/