範例2-1:Travel

【範例結果】

三、【section 第2個】figure 設定

(1) figure共用設定

/* section  第2個設定=============================================*/
figure {
    width: 350px; height: 203px;
    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;
            padding: 10px;
            background: rgba(173, 57, 138, 0.46);
            box-shadow: 0 1px #000;
}
figcaption h2 span{
    font-size: 14px; text-align: right;
    display: block; 
}
figcaption p{padding: 20px;}

 

 (2) 【figure 第1個】

figure:nth-of-type(1) figcaption{
    top: 100%; 
}
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):hover img{ transform: scale(1.2);}
figure:nth-of-type(4) figcaption{ opacity: 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 {
    width: 350px; height: 203px; 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;
}