Html 如何在div覆盖上添加过渡

我想在叠加上添加一个过渡，但我无法确定它需要在哪个类上才能工作。我希望它从顶部向下过渡。类似于

-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;

HTML

---

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

您需要将效果应用于

。覆盖

-无法将转换设置为

转换

，因为它不受支持（）

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

删除

显示：无-无法设置动画

设置你的
.overlay
的样式，但要将
设置为top:-100%，
位置：绝对位置，和<代码>转换：前0.3s易入易出

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

最后，添加
溢出：隐藏到
li
容器


ul{
列表样式：无；
宽度：252px；
保证金：40px自动60 px自动；
}
ulli{
位置：相对位置；
显示：内联块；
宽度：252px；
高度：252px；
溢出：隐藏；
}
李：悬停。覆盖{
排名：0；
}
.覆盖{
宽度：252px；
高度：252px；
不透明度：0.75；
位置：绝对位置；
背景色：黑色；
前-100%；
过渡：前0.3s缓进缓出；
}
.覆盖分区{
位置：相对位置；
显示：内联块；
顶部：40px；
利润率：40px 5px 0；
}
.bt1{
背景颜色：橙色；
宽度：50px；
高度：50px；
}
.bt2{
背景颜色：绿色；
宽度：50px；
高度：50px；
}


丹·莫里斯
多媒体记者

您希望何时过渡到fire？当你悬停时？同样，你能分享HTML或小提琴吗？是的，当前当你悬停在图像上时，会出现一个覆盖图。我想他们是一个覆盖过渡。我已经在上面的代码中添加了html。谢谢。谢谢你的帮助@Matthewelsmy不客气，如果我刚才提供的答案不够清楚，请告诉我！一个很好的例子就是这个网站上的“变革代理人”部分@马修尔松
<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>

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