JDX01(2017):Travel World(1)

範例結果

六、【section3】figure 圖說加入

(1) figure 圖說美化

S1:html 結構加入

    <section id="sec3">
      <h2>section3:景點</h2>
      <figure>
          <img src="image/sec03_01.jpg" alt=""/>
          <figcaption>
              <h3>景點1</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
      <figure>
          <img src="image/sec03_02.jpg" alt=""/>
          <figcaption>
              <h3>景點2</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
      <figure>
          <img src="image/sec03_03.jpg" alt=""/>
          <figcaption>
              <h3>景點3</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
      <figure>
          <img src="image/sec03_04.jpg" alt=""/>
          <figcaption>
              <h3>景點4</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
      <figure>
          <img src="image/sec03_05.jpg" alt=""/>
          <figcaption>
              <h3>景點5</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
      <figure>
          <img src="image/sec03_06.jpg" alt=""/>
          <figcaption>
              <h3>景點6</h3>
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .</p>
          </figcaption>
      </figure>
    </section>

Pug 結構

      section#sec3
        h2 section3.景點
        figure
          img(src='image/sec03_01.jpg', alt='')
          figcaption
            h3 景點1
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .
        figure
          img(src='image/sec03_02.jpg', alt='')
          figcaption
            h3 景點2
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .
        figure
          img(src='image/sec03_03.jpg', alt='')
          figcaption
            h3 景點3
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .
        figure
          img(src='image/sec03_04.jpg', alt='')
          figcaption
            h3 景點4
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .
        figure
          img(src='image/sec03_05.jpg', alt='')
          figcaption
            h3 景點5
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .
        figure
          img(src='image/sec03_06.jpg', alt='')
          figcaption
            h3 景點6
            p Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium quisquam a velit officiis labore eius error animi iste itaque eum amet veritatis placeat voluptatem .

 

 

S2:基本figure 美化

CSS美化【基本figure 美化】

figure{
  width: 400px; height:250px;
  position: relative;
  cursor: pointer; box-shadow: 1px 1px 3px #000;
  overflow: hidden; 
  margin: 20px;
}
figure img{ width: 100%; height:100%;}
figcaption{ 
  width: 100%; height:100%;
  background: rgba(0,0,0,0.5); color: #fff; text-align: center;
  padding: 10px; box-sizing: border-box;

  position: absolute; left: 0; top: 0;
}
figcaption h3{ font-size: 20px; height: 50px;}

SCSS美化【基本figure 美化】

#sec3{
 
  figure{
    width: 400px; height:250px;
    position: relative;
    cursor: pointer; box-shadow: 1px 1px 3px #000;
    overflow: hidden; 
    margin: 20px;
  }
  img{
    width: 100%; height: 100%;
  }
  figcaption{
    width: 100%; height: 100%;
    background: rgba(0,0,0,.5); color: #fff;
    padding: 10px; box-sizing: border-box;

    position: absolute; left: 0; top: 0;
    h3{
      font-size: 20px; height: 50px; text-align: center;
    }
  }

 

S3:各項圖說設定

CSS美化【各項圖說設定】

/*==【figure】第1個==*/
figure:nth-of-type(1) figcaption{ top:80%; transition: all .5s;}
figure:nth-of-type(1):hover figcaption{ top: 0px;}
 
/*==【figure】第2個==*/
figure:nth-of-type(2) figcaption{ left: -100%; transition: all .5s;}
figure:nth-of-type(2):hover figcaption{ left: 0px;}
 
/*==【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%;}
 
/*==【figure】第4個==*/
figure:nth-of-type(4) img{ transition: all .5s;}
figure:nth-of-type(4) {cursor: zoom-in;}
figure:nth-of-type(4):hover img{ transform: scale(1.2);}
figure:nth-of-type(4) figcaption{opacity: 0;}
 
/*==【figure】第5,6個==*/
figure:nth-of-type(5) figcaption,
figure:nth-of-type(6) figcaption{ top:80%; transition: all .5s;}

SCSS美化【各項圖說設定】

#sec3{
  // 【figure】第1個
  figure:nth-of-type(1){
    figcaption{ top: calc(100% - 50px); transition: all .5s; }
    &:hover figcaption{ top: 0;}
  }
  // 【figure】第2個
  figure:nth-of-type(2){
    figcaption{ left: -100%; transition: all .5s;}
    &:hover figcaption{ left: 0px;}
  }
  // 【figure】第3個
  figure:nth-of-type(3){
    img{ 
      position: absolute;top: 0; left: 0; z-index: 1;
      transition: all .5s;
    }
    &:hover img{ left: 100%;}
  }
  // figure】第4個==*/
  figure:nth-of-type(4){
    cursor: zoom-in;
    img{ transition: all .5s;}
    &:hover img{ transform: scale(1.2);}
    figcaption{opacity: 0;}
  }
  // 【figure】第5,6個==*/
  figure:nth-of-type(5),figure:nth-of-type(6){
    figcaption{ top: calc(100% - 50px); transition: all .5s; }
    &:hover figcaption{ top: 0;}
  }
}
// #sec3 end

S4:圖說右上角美化

CSS美化【圖說右上角美化】

/*==【figure】右上角標籤==*/
figure:nth-child(2n):before{
  content: '達人推薦'; background: #fff; text-align: center;
  position: absolute; width: 120px;      /*top為width一半*/
  top: 60px; right: 0px;  z-index: 3;
  transform: rotate(45deg); transform-origin: 100% 100%;    /*以右下角為基準旋轉*/
  box-shadow: -1px 1px 5px #000;
}

figure:nth-child(2n+1):before{
  content: '季節限定'; background: #fff; text-align: center;
  position: absolute; width: 120px;
  top: 60px; right: 0px; z-index: 3;
  transform: rotate(45deg); transform-origin: 100% 100%;
  box-shadow: -1px 1px 5px #000;
}

SCSS美化【圖說右上角美化】

#sec3{

  //【figure】右上角標籤
  figure:nth-child(2n):before{
    content: '達人推薦'; background: #fff; text-align: center;
    position: absolute; width: 120px;      /*top為width一半*/
    top: 60px; right: 0px;  z-index: 3;
    transform: rotate(45deg); transform-origin: 100% 100%;    /*以右下角為基準旋轉*/
    box-shadow: -1px 1px 5px #000;
  }
  
  figure:nth-child(2n+1):before{
    content: '季節限定'; background: #fff; text-align: center;
    position: absolute; width: 120px;
    top: 60px; right: 0px; z-index: 3;
    transform: rotate(45deg); transform-origin: 100% 100%;
    box-shadow: -1px 1px 5px #000;
  }
}
// #sec3 end

 

(2) Flex 應用(一般設定)

 

#sec3 {
  display: flex; flex-wrap: wrap; justify-content: space-around;
}