Ex:Travel4:總複習

【範例結果】

【figure】圖說練習設定

html結構

  <section id="figure">
<h2>景點欣賞</h2>
<div>
<!-- figure*12>a[href="./img/figure$$.jpg"]>img[src="./img/figure$$.jpg"]+figcaption>div{景點$$<span>英文名稱$$</span>}+div{Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!} -->
<figure>
<a href="./img/figure01.jpg">
<img src="./img/figure01.jpg" alt="">
<figcaption>
<div>凱旋門<span>arc de triomphe</span></div>
<div>雄獅凱旋門,位於法國巴黎的戴高樂廣場中央,香榭麗舍大街的西端。是拿破崙為紀念1805年打敗俄奧聯軍的勝利,於1806年下令修建而成的。拿破崙被推翻後,凱旋門工程中途輟止。波旁王朝被推翻後又重新復工,到1836年終於全部竣工。</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure02.jpg">
<img src="./img/figure02.jpg" alt="">
<figcaption>
<div>景點02<span>英文名稱02</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure03.jpg">
<img src="./img/figure03.jpg" alt="">
<figcaption>
<div>景點03<span>英文名稱03</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure04.jpg">
<img src="./img/figure04.jpg" alt="">
<figcaption>
<div>景點04<span>英文名稱04</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure05.jpg">
<img src="./img/figure05.jpg" alt="">
<figcaption>
<div>景點05<span>英文名稱05</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure06.jpg">
<img src="./img/figure06.jpg" alt="">
<figcaption>
<div>景點06<span>英文名稱06</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure07.jpg">
<img src="./img/figure07.jpg" alt="">
<figcaption>
<div>景點07<span>英文名稱07</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure08.jpg">
<img src="./img/figure08.jpg" alt="">
<figcaption>
<div>景點08<span>英文名稱08</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure09.jpg">
<img src="./img/figure09.jpg" alt="">
<figcaption>
<div>景點09<span>英文名稱09</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure10.jpg">
<img src="./img/figure10.jpg" alt="">
<figcaption>
<div>景點10<span>英文名稱10</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure11.jpg">
<img src="./img/figure11.jpg" alt="">
<figcaption>
<div>景點11<span>英文名稱11</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
<figure>
<a href="./img/figure12.jpg">
<img src="./img/figure12.jpg" alt="">
<figcaption>
<div>景點12<span>英文名稱12</span></div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis omnis incidunt quidem eos. Voluptates, deleniti!</div>
</figcaption>
</a>
</figure>
</div>
</section>

 

(1) figure共用設定

figure{
width: 400px; height: 250px;
position: relative;
cursor: pointer;
box-shadow: 1px 1px 3px #000;
}
figure img{
width: 100%; height: 100%;
}
figcaption{
background: rgba(0, 0, 0, 0.6); color: #fff;
width: 100%; height: 100%;
position: absolute;top: 0;left: 0;
}
figcaption div:nth-child(1){
font-size: 20px; height: 50px;
line-height: 50px;
background: rgba(173, 57, 138, 0.46);
box-shadow: 0 1px #000;
text-align: center;
position: relative;
}
figcaption div:nth-child(1) span{
font-size: 14px; padding: 5px 20px;
position: absolute; right: 0;bottom: 0;
line-height: normal;
}
figcaption div:nth-child(2){
padding: 20px;
}

 

(2) 【figure 第1個】

/*【figure】第1個 */
figure figcaption{
top: calc(100% - 50px);
transition: all .5s;
}
figure:hover figcaption{
top: 0%; 
}

 

(3) 【figure 第2個】

/*【figure】第2個  */
figure:nth-of-type(2) figcaption{
top: 0;
left: -100%; 
}
figure:nth-of-type(2):hover figcaption{
top: 0;
left: 0%; 
}

 

(4) 【figure 第3個】

/*【figure】第3個  */
figure:nth-of-type(3) img{
position: absolute; 
top: 0; left: 0; z-index: 1;
transition: all .5s;
}
figure:nth-of-type(3):hover img{
left: 100%; 
}

(5) 【figure 第4個】

/*【figure】第4個  */
figure:nth-of-type(4) img{
position: absolute;
z-index: 2;
filter:blur(2px) grayscale(100%);
transition: all .5s;
}
figure:nth-of-type(4):hover img{
transform: scale(1.2);
filter:blur(0px) grayscale(0%);  
}

四、【section】Flex排列

Flex應用: Flex CSS tools

#figure>div{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
figure{
width: 400px; height: 250px;
position: relative;
cursor: pointer;
box-shadow: 1px 1px 3px #000;
overflow: hidden;
margin: 10px;
}