接續昨天的進度繼續往下寫
實作 css animation - 欄位圖片縮放
首先在 image-box (包圖片的區塊) 下新增有文字內容的區塊

<div class="info-box">
  <div class="info-content">
    <h2>title</h2>
    <span>ography. Constantly inspired by his studies in cinema, he applies cinematic tech</span>
  </div>
</div>

然後針對文字區塊寫樣式，
這邊要注意的是，外層要寫 position:relative; 內層寫 position:absolute;
內層在對位時才不會跑掉

.hover-box .info-box {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom:10px;
  right:10px;
  color:#fff;
  background:rgba(0,0,0,.6);
  text-align:center;
  transform:scaleY(0);
  transition:transform .5s;
} 

.hover-box .info-box .info-content{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:15px;
}
/*當hover的時候 文字區塊的 Y 軸高度由0變1*/
.hover-box:hover .info-box {
  transform:scaleY(1);
}

到這邊就完成了
附上codepen如下
https://codepen.io/UHU/pen/yQBGpm