how would i add a transition on a div overlay - html

Question

I would like to add a transition on the overlay but i can't work out which class it needs to be on to make it work. I'd like it to transition down from the top. Something along the lines of
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
HTML
<ul class="about-image">
<li>
<div class="image"></div>
<div class="overlay"><div class="bt1">Dan Morris</div><div class="bt2">Multimedia Journalist</div></div>
</li>
</ul>
CSS
.image{
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
background-image: url(../images/danmorris_profile.png);
}
.overlay{
width:252px;
height:252px;
display:none;
position:absolute;
top:40px;
left:0px;
}
.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}
ul { list-style: none; width: 252px;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
}
li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}
Any help would be greatly appreciated. Thanks in advance

Answer 1

You need to apply the effect to the .overlay - Transition cannot be set to transform as it is not supported (Reference).
To get the effect you are after, try the following:
Remove your display: none; - this cannot be animated.
Style your .overlay completely but set top: -100%;, position: absolute;, and transition: top 0.3s ease-in-out;.
On hover, just change to top: 0;.
Finally, add overflow: hidden; to the li container.
ul {
list-style: none;
width: 252px;
margin: 40px auto 60px auto;
}
ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
overflow: hidden;
}
li:hover .overlay {
top: 0;
}
.overlay{
width:252px;
height:252px;
opacity: 0.75;
position:absolute;
background-color:black;
top:-100%;
transition: top 0.3s ease-in-out;
}
.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}
<ul class="about-image">
<li>
<img src="http://placehold.it/252x252"></div>
<div class="overlay">
<div class="bt1">Dan Morris</div>
<div class="bt2">Multimedia Journalist</div>
</div>
</li>
</ul>
For convenience I have moved your .image to an element - but it will work with both. Also added some ease for smoothness.
Pen here