奇摩電影頁transition特效，mouseover時圖片放大

by ShadowKao

HTML

<div class="box">
  <!--把backgrouon-image:url寫在css的話，工程師無法寫程式套圖，所以寫在html-->
  <div class="img" style="background-image:url(https://movies.yahoo.com.tw/i/o/production/mod-editor-weeks/January2019/rCMse3KqCj4ae8YRsLA2-1644x910.jpg">
  </div>
  <div class="bottom">
    漫威10周年海報
  </div>
</div>

CSS

.box {
  width: 560px;
  /* width:400px;*/
  /*background-size:cover，如果width、height太小，比例和圖片不對會被裁切*/
  height: 310px;
  position: relative;
  /*為了div.bottom可以蓋div.img*/
  /* border:1px solid #000;*/
  /*Debug用*/
  overflow: hidden;
  /*動畫放大時，div.img超出容器要切掉*/
}

div.img {
  width: 100%;
  height: 100%;
  /*填滿容器*/
  background-size: cover;
  /*contain有可能留邊，cover有可能被裁切但至少等比例填滿*/
  background-position: center center;
  /*沒填的話，背景圖預設會貼齊容器的左上角*/
  background-repeat: no-repeat;
  /*最後加上動畫*/
  transition: 1s;
  transform: scale(1);
}

div.bottom {
  background-color: rgba(0, 0, 0, 0.8);
  /*背景色透明*/
  /*opacity:0.9;*/
  /*可能連白色文字也變透明，不採用*/
  color: #fff;
  position: absolute;
  /*蓋住div.img*/
  bottom: 0;
  left: 0;
  /*靠左下*/
  width: 100%;
  padding: 15px;
  /*如果div.bottom超出容器範圍的話就設box-sizing，忽略padding佔的width*/
  box-sizing: border-box;
}

.box:hover>div.img {
  transform: scale(1.1);
  /*1.1或1.2倍即可*/
}