Activating div while hovering over underlaying div - CSS transition not working - css

Question

First of all, I'm sorry if this question was already answered but I couldn't find it anywhere.
I'm trying to get a smooth transition when hovering over a div. On top of this div is another div, which gets visible when hovering. The transition didn't seem to do the trick, so how can I pull this off? (jquery instead of CSS, or other/better code?)
Maybe there's another way of doing this, I hope you guys can help me.
HTML:
<ul>
<li>
<div class="hover">
<a href="#">
<p>Test</p>
</a>
</div>
<img src="#" alt="img" />
<div class="text">
<p>Test</p>
</div>
</li>
</ul>
CSS:
body { background-color: #eee;
}
ul { margin: 0;
padding: 0;
list-style: none;}
ul li { width: 30.33%;
height: auto;
margin-right: 3%;
padding: 5px;
background-color: #fff;
float: left;
position: relative;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
ul li img { width: 100%;
max-height: 100%;
z-index: 1;
background-color: #ddd;
border: 0;}
.text { width: 100%;
padding-top: 7%;}
.text p { margin: 0 10px;
padding-bottom: 7%;}
.hover { height: 100%;
background-color: #333;
position: absolute;
top: 0;
left: 0;
right: 0;
display: none;}
.hover a { width:100%;
height: 100%;
margin: 0;
padding: 25px;
display: block;
color: #fff;
text-decoration: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
ul li:hover > .hover { display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;}
Here's the code: http://jsfiddle.net/HAFEx/
Thanks in advance!

Answer 1

A couple things need to be changed. Firstly, you can't animate the display property, so you should toggle opacity on hover instead.
Secondly, you should apply the transition on .hover, not just on parent:hover .hover so that it transitions both ways.
Using both of those improvements (and some formatting of your code) you get this result
.hover {
transition: all 0.2s ease;
opacity:0;
... Other properties ...
}

Answer 2

display:block can't be afected by a transition.
Instead use opacity.
.hover { height: 100%;
background-color: #333;
position: absolute;
top: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
opacity:0;
}
ul li:hover > .hover{
display: block;
opacity:1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
http://jsfiddle.net/Rjq3y/

Answer 3

You cannot transition css display. Try opacity.
http://jsfiddle.net/HAFEx/2/
ul li:hover .hover {
opacity:1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}

Answer 4

You can also jquery to animate the display:none property.
$("li").mouseover(function(){
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".hover").fadeOut(1000);
});
Check out this codepen.
http://codepen.io/anon/pen/rqozA

Answer 5

The display property is a number or hexadecimal value, so it cannot be tweened. In this circumstance, you can't simply have the hover state opacity: 0.
Two work arounds are Javascript (messy) and using CSS Keyframe animations. http://hschwarz77.wordpress.com/2013/10/16/css-transition-from-display-none-to-display-block-on-hover/
To the best of my knowledge, these are the only solutions to have the div completely hidden (and unusable...visibility:hidden occupies the space) and fade in.