CSS例子 ＞鼠标滑动到图片上，过渡动画显示加载更多

<div class="box">
  <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" alt="">
  <div class="info">
    <p>前沿探索p>
    <h4>憧憬6G,共同定义6GH4>
    <p>《6G无限通信新征程》序言p>
    <p class="more">了解更多 >p>
  div>
div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box{
  overflow: hidden;
  position:relative;
  width: 446px;
  height: 314px;
  /* background-color: pink; */
}

.box img{
  width: 100%;
  height: 100%;
}

.box:hover img {
  transform: scale(1.05)
}

/** 半透明的黑色罩子 */
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /** 线性渐变: 上面透明,下面半透明 */
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));
  opacity: 0;
    /** 如果不加过度,使用display:none也行 */
}
.box:hover::after {
  opacity: 1;
}

.info {
  position: absolute;
  left: 0;
  bottom: -50px;
  padding: 25px 30px;
  font-size: 18px;
  transition: all .5s;
}
.info h4 {
  font-size: 24px;
  margin: 5px 0;
}
.info .more {
  display: black;
  color: #fff;
  margin-top: 15px;
}
/** 鼠标经过大盒子 */
.box:hover .info {
  bottom: 0;
}