鼠标移入，文字从图片下方上来显示

穷游网案例：

鼠标移入，文字从图片下方上来显示：

#a2{
width: 200px;
height: 250px;
border: 1px solid transparent;
float: left;
margin-left: 18px;
background-image: url(123.jpg.webp);
background-position: center;
border-radius: 10px;
}

#b1{
width: 200px;
height: 200px;
border: 1px solid transparent;
background: rgba(0, 0, 0, 0.3);
position: absolute;
margin-top: 250px;
transition : 1.5s
}

#c1{
width: 200px;
height: 180px;
border: 1px solid transparent;
border-bottom: white;
text-align: center;
line-height: 30px;
color: white;
font-size: 15px;
}

#d1{
width: 200px;
height: 50px;
border: 1px solid transparent;
text-align: center;
color: white;
}
#e1{
width: 60px;
height: 30px;
border: 1px solid transparent;
float: right;
position: relative;
margin-top: 10px;
color: white;
}
#f1{
width: 50px;
height: 30px;
border: 1px solid transparent;
float: right;
position: relative;
margin-top: 10px;
color: white;
}

<div id="a2">
<div id="b1">
<div id="c1">福建·霞浦海岛两日游｜ 海鲜🦞·啤酒烧烤
🚗霞浦火车站租车，半小时到霞浦三沙镇，镇上有停车场，
单次停车免费（民宿报销）</div>
<div id="d1">
——————————
<div id="e1">🤍&nbsp;171</div>
<div id="f1">🗯&nbsp;4</div>
</div>
</div>
</div>

var a2 = document.getElementById("a2")

var b1 = document.getElementById("b1")
a2.onmouseover = function(){
b1.style.marginTop = "0px"
b1.style.transition = "1s"
}
b1.onmouseout = function(){
b1.style.transition = "0s"
b1.style.marginTop = "300px"          （注意：marginTop = ”300px“可以改）

}