奇摩電影頁transition特效

by ShadowKao

HTML

<div class="box">
  <img src="https://movies.yahoo.com.tw/x/r/w420/i/o/production/movies/December2018/DVvvgHVPjD70xUjFc1bC-2000x2788.jpg" />
  <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用*/
	  overflow:hidden;  /*把超出的圖片切掉*/
	 
}
img
{
	 width:100%; /*等比例縮放至容器內，就找容器width、height誰最小就對它 100%;*/
	 /*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;	 
}