奇摩電影頁transition特效，圖片改用背景圖background-size解決圖片比例問題

by ShadowKao

HTML

<div class="box">
  <!--把backgrouon-image:url寫在css的話，工程師無法寫程式套圖，所以寫在html-->
  <div class="img" style="background-image:url(https://movies.yahoo.com.tw/x/r/w420/i/o/production/movies/January2019/En57UcBJFuB5Do82N5ou-2129x2647.jpg)">
  </div>
  <ul class="info">
    <li><a href="#">電影介紹</a></li>
    <li><a href="#">預告片</a></li>
    <li><a href="#">時刻表</a></li>
  </ul>
</div>

CSS

.box {
  width: 300px;
  height: 400px;
  position: relative;
  /*為了黑色的overlay*/
  /*border:1px solid #000;*/
  /*Debug用*/
}

div.img {
  width: 100%;
  height: 100%;
  /*填滿容器*/
  background-size: cover;
  /*contain有可能留邊，cover有可能被裁切但至少等比例填滿*/
  background-position: center center;
  background-repeat: no-repeat;
  /*display:none;*/
  /*debug用*/
}

/*黑色overlay*/

ul.info {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  /*蓋圖*/
  top: 0;
  left: 0;
  /*靠左上*/
  width: 100%;
  height: 100%;
  /*黑色overlay填滿容器*/
  background: rgba(0, 0, 0, 0.8);
  /* 注意使用rgba 而不是一開始就用opacity，否則會影響子元素a的背景色*/
  /*background:#000;*/
  /*opacity:0.9;*/
  transition: 0.4s;
  opacity: 0;
  /*最後step*/
}

ul>li
/*分配三個容器佔的比例*/

  {
  display: table;
  /*為了文字垂直置中*/
  width: 100%;
  height: 33.5%;
}

ul>li>a {
  text-decoration: none;
  /* display:block;  */
  /* height:100%;*/
  display: table-cell;
  /*為了文字垂直置中*/
  /*line-height:100%;*/
  /*無法文字垂直置中*/
  vertical-align: middle;
  /*文字垂直置中*/
  text-align: center;
  /*文字水平置中*/
  color: #fff;
  transition: 0.4s;
}

ul>li>a:hover {
  background-color: #434eae;
}

.box:hover>ul.info {
  opacity: 1;
}