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;
}