強片介紹(P2)

強片介紹及選電影

 

一、強片介紹

範例結果

<h3>強片介紹</h3>
<div class="imgblock1">
    <figure>
    	<img src="../images/movie/movie01.jpg" alt="">
        <figcaption>瓦力<span>發人深省的機器人故事</span></figcaption>
    </figure>
    <figure><img src="../images/movie/movie02.jpg" alt=""><figcaption>勇敢傳說<span>梅莉達的勇敢故事</span></figcaption></figure>
    <figure><img src="../images/movie/movie03.jpg" alt=""><figcaption>天外奇蹟<span>是否還有夢想還未實現</span></figcaption></figure>
    <figure><img src="../images/movie/movie04.jpg" alt=""><figcaption>獅子王<span>史瑞克英雄救美</span></figcaption></figure>
    <figure><img src="../images/movie/movie05.jpg" alt=""><figcaption>怪物史瑞克<span>發人深省的機器人故事</span></figcaption></figure>
</div>

Step1:初始規劃

/*.imgblock1=================================================*/
.imgblock1 figure{
	width: 180px; height: 270px;
	border:5px solid #70ABAD; box-shadow:2px 2px 10px #000;
	border-radius: 20px;
}
.imgblock1 img{
	width: 100%; height: 100%; 
}
.imgblock1 figcaption{
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.55);
	text-align:center; color:#FFFFFF; font-weight:bold;
	font-size:30px; line-height: 40px;
	text-shadow:1px 1px 3px #000,-1px -1px 3px #000;
}
.imgblock1 figcaption span{ font-size:16px;  line-height: 20px;
							display: block;}

Step2: 美化第二階段

Step3: 針對各個figure 進行美化

/*.imgblock1=================================================*/
.imgblock1 {text-align: center;}
.imgblock1 figure{
	width: 180px; height: 270px;
	border:5px solid #70ABAD; box-shadow:2px 2px 10px #000;
	border-radius: 20px; overflow: hidden;
	
	position: relative;
	display: inline-block; margin: 20px;
	cursor: pointer;
	transition: all .5s;
}
.imgblock1 img{
	width: 100%; height: 100%;
	transition: all .5s;
}
.imgblock1 figcaption{
	width: 100%; /*height: 100%;*/
	background: rgba(0,0,0,0.55);
	color:#FFFFFF; font-weight:bold;
	font-size:30px; line-height: 40px;
	text-shadow:1px 1px 3px #000,-1px -1px 3px #000;
	transition: all .5s;
	
	position: absolute; top: 0; left: 0;	
	box-shadow: inset 0 0 50px rgba(204,0,102,0.8), inset 0 0 100px rgba(204,0,102,0.5);
	padding-top: 105px;  height: 165px;
}
.imgblock1 figcaption span{ font-size:16px;  line-height: 20px;
							display: block;}
	
.imgblock1 figure:nth-child(1) figcaption{ opacity:0;}
.imgblock1 figure:nth-child(1) figcaption:hover{ opacity:1;}
.imgblock1 figure:nth-child(2) figcaption{ margin-left: -185px;}
.imgblock1 figure:nth-child(2):hover figcaption{ margin-left:0px;}
.imgblock1 figure:nth-child(3) img{ z-index:2;
									position: absolute; top: 0; left: 0;}
.imgblock1 figure:nth-child(3):hover img{ margin-left: 180px; }

.imgblock1 figure:nth-child(4) figcaption{ display: none;}
.imgblock1 figure:nth-child(4):hover { transform:scale(1.1);}

.imgblock1 figure:nth-child(5) figcaption{ display: none;}
.imgblock1 figure:nth-child(5) img{filter: blur(1px) hue-rotate(90deg) grayscale(100%);}
.imgblock1 figure:nth-child(5):hover img{filter: blur(0px);}