html - 我如何在div叠加层上添加过渡效果

我想在叠加层上添加一个过渡效果，但是我无法弄清楚它必须在哪个类上才能起作用。我希望它从顶部向下过渡。遵循以下原则

-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;
}

任何帮助将不胜感激。提前致谢

最佳答案

您需要将效果应用到.overlay-无法将过渡设置为transform，因为它不受支持（Reference）。

要获得想要的效果，请尝试以下操作：

删除您的display: none;-无法对其进行动画处理。

完全设置.overlay的样式，但设置top: -100%;，position: absolute;和transition: top 0.3s ease-in-out;。

悬停时，只需更改为top: 0;。

最后，将overflow: hidden;添加到li容器。

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>

为了方便起见，我已将您的.image移至一个元素-但这两个元素都可以使用。还增加了一些平滑度。

Pen here