卡片版面5

在這個範例中要練習卡片版面的切版

整理幾個小重點如下方：

1.將section設為滿版
2.添加一個container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.在小卡片card_small設定display: flex，在使用flex效果時可以觀察到無論子層數量多寡，內容常會被壓縮以及擠在同一行，在這個範例中大卡片寬度為600px，小卡片寬度為300px，一行只呈現兩個小卡片，因此可以使用flex-wrap，超過盒模型範圍600px將會自動換到下一行呈現
4.文字是要蓋在圖片上，使用屬性position: absolute (絕對定位)讓他抽出來獨立一層，並且在txt的父層item內添加position: relative (相對定位)，做為子層定位的依據
5. 滑鼠游標移置item卡片時，會出現半透明的遮罩背景，這邊我使用偽元素.item:hover::before去製作，使用偽元素要添加content: ''接下來的調整才會顯示，同樣使用屬性position: absolute獨立一層，將他的寬高各設置100%，製作出符合盒模型的遮罩background-color: rgba(125, 44, 69, 0.5)
6. 消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/abGZmYx

HTML

<section>
    <div class="container">
        <div class="card card_big">
            <a href="#" class="item">
                <span class="label">小白人的生活</span>
                <div class="txt">
                    <h2>準時下班馬上跑 收包包往外衝</h2>
                </div>
                <div class="pic">
                    <img src="https://i.ibb.co/9VvmdzG/mini3.jpg">
                </div>

            </a>
        </div>
        <div class="card card_small">
            <a href="#" class="item">
                <span class="label">小白人的生活</span>
                <div class="txt">
                    <h2>肚子餓了給我飯吃！</h2>
                </div>
                <div class="pic">
                    <img src="https://i.ibb.co/mcsrJS1/mini-eat.jpg">
                </div>
            </a>
            <a href="#" class="item">
                <span class="label">小白人的生活</span>
                <div class="txt">
                    <h2>共同最戰對抗慣老闆</h2>
                </div>
                <div class="pic">
                    <img src="https://i.ibb.co/wRwH3YC/mini6.jpg">
                </div>
            </a>
            <a href="#" class="item">
                <span class="label">小白人的生活</span>
                <div class="txt">
                    <h2>互相傻眼沈默不語</h2>
                </div>
                <div class="pic">
                    <img src=https://i.ibb.co/k92JpCY/mini4.jpg">
                </div>
            </a>
            <a href="#" class="item">
                <span class="label">小白人的生活</span>
                <div class="txt">
                    <h2>上班好同事下班不認識</h2>
                </div>
                <div class="pic">
                    <img src="https://i.ibb.co/rsV5yCQ/mini2.jpg">
                </div>
            </a>
        </div>
    </div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
}
.container{
    width: 1200px;
    margin: auto;
    padding: 50px 60px;
    display: flex;
}
.card .item{
    position: relative;
}
.card_small{
    display: flex;
    flex-wrap: wrap;
}
.card_big .item{
    width: 600px;
    height: auto;
}
.card_small .item{
    width: 300px;
    height: auto;
}

.card .txt{
    position: absolute;
    color: #fff;
}
.card  .item .label{
    color: #fff;
    font-size: 14px;
    padding: 5px;
    background-color: #d95562;
    position: absolute;
    top: 20px;
    left: 20px;
}

.card_big .txt{
    bottom: 0;
    padding: 20px;
    font-size: 24px;
}

.card_small .txt{
    bottom: 0;
    padding: 20px;
    font-size: 12px;
}
.card_big .pic{
    width: 600px;
}
.card_small .pic{
    width: 300px;
}
img{
    width: 100%;
    vertical-align: bottom;
}

.card .item:hover::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    top: 0;
    transition: .5s;
}