<div class="container">
  <div class="card card0">
    <div class="border"></div>
  </div>
</div>

.container {
  height: 100vh;
  width: 100vw;
  max-height: 800px;
  max-width: 1280px;
  min-height: 600px;
  min-width: 1000px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;

  .card {
    height: 379px;
    width: 300px;
    border-radius: 10px;
    // 主要是这个过渡
    transition: background 0.8s;
    overflow: hidden;
    background: #000;
    box-shadow: 0 70px 63px -60px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .border {
    height: 369px;
    width: 290px;
    background: transparent;
    border-radius: 10px;
    // 过渡
    transition: border 1s;
    position: relative;
  }

  .card0 {
    background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
      center center no-repeat;
    background-size: 300px;
  }
  .border:hover {
    border: 1px solid #fff;
  }
  .card0:hover {
    background: url("https://i.pinimg.com/736x/8f/a0/51/8fa051251f5ac2d0b756027089fbffde--terry-o-neill-al-pacino.jpg")
      left center no-repeat;
    background-size: 600px;
  }
}