鼠标经过，图片放大，文字上移，背景遮罩，显示出了解更多字样。

首先创建好盒子和内容：

<div class="box">
    <img src="./img/huawei.jpg" alt="">
    <div class="info">
      <div class="tilte mb">招聘</div>
      <div class="name">
        我是招聘信息一个很长很长很长的标题
      </div>
      <div class="brief mb">我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介我是招聘信息一个很长很长很长的简介</div>
      <div class="more">了解更多<span class="iconRight">></span></div>
    </div>
  </div>

样式：

/*整个盒子的样式*/
.box{
      position: relative;
      width: 768px;
      height: 542px;
      margin: 0 auto;
      color: white;
      overflow: hidden;
    }
/*盒子里面的图片*/
    .box img{
      width: 100%;
      height: 100%;
      transition: all 0.5s;
    }
/*盒子里面的图片上层的文字信息*/
    .info{
      position: absolute;
      bottom: -25px;
      padding: 0px 30px;
      font-size: 20px;
      z-index: 99;
      transition: all 0.5s;
    }
/*文字标题*/
    .info .name{
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 10px;
    }
/*文字简介*/
    .info .brief{
      color: rgb(222, 222, 222);
    }
/*底部边距统一样式*/
    .mb{
      margin-bottom: 10px;
    }
/*更多旁边的小箭头*/
    .iconRight{
      color: brown;
      margin-left: 10px;
    }
/*了解更多文字*/
    .box .more{
      opacity: 0;
      transition: all 0.3s;
    }
/*利用伪元素做背景遮罩*/
    .box::after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

当鼠标经过盒子时的样式：

     /*鼠标经过盒子图片变大*/
      .box:hover img{
      transform: scale(1.2);
    }
    /*鼠标经过盒子简介信息向上移*/
    .box:hover .info{
      bottom: 20px;
    }
     /*鼠标经过盒子背景遮罩*/
    .box:hover::after{
      background-image: linear-gradient(transparent,rgba(0,0,0,0.5));
    }
    /*鼠标经过盒子了解更多字样显示*/
    .box:hover .more{
      opacity: 1;
    }

最终效果：