範例2(簡):Travel

【範例結果】

三、【section 第2個】figure 設定

(1) figure共用設定

/* section2  figure 共同設定  */
figure {
    width: 400px; height: 225px;
    position: relative;
    
    cursor: pointer; overflow: hidden; box-shadow: 1px 1px 3px #000;
}
figure img{
    width: 100%; height: 100%;
    
    transition: all .5s; 
}

figcaption{
    background: rgba(0, 0, 0, 0.6); color: #fff;
    width: 100%; height: 100%; 
    box-sizing: border-box;
    
    position: absolute; left: 0; top: 0;
    
    transition: all .5s; 
}

figcaption h2{
  font-size: 20px; text-align: center;
  height: 50px; line-height: 50px;
  background: rgba(173, 57, 138, 0.46);
  box-shadow: 0 1px #000;
}

figcaption p{padding: 20px;}

 

(2) 【figure 第1個】

/*【figure】第1個 */
figure:nth-of-type(1) figcaption{
    top: calc(100% - 50px);  
}
figure:nth-of-type(1):hover figcaption{
    top: 0%; 
}

 

(3) 【figure 第2個】

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

 

(4) 【figure 第3個】

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

(5) 【figure 第4個】

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

四、【section】Flex排列

/*section 2【Flex】排列  */
section:nth-of-type(2){
    display: flex; flex-wrap: wrap;
    justify-content: space-around;
}

section:nth-of-type(2) h1 { width: 100%;}

figure {
    margin: 20px;
}

五、【figure】右上角標籤

transform tools

/*【figure】右上角標籤  */
section:nth-of-type(2) 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;
}

section:nth-of-type(2) 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;
}