卡片版面3

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

整理幾個小重點如下方：

1.將section設為滿版
2.在container設定display: flex讓資料橫排顯示
3.在使用flex效果時可以觀察到無論子層數量多寡，內容常會被壓縮以及擠在同一行，這時可以使用flex-wrap來完成換行，這邊是將item寬度設為33.3333%，平均分配卡片寬度，超過的欄位就會自動換到下一行顯示
4.使用justify-content: space-between平均分配剩餘空間寬度，讓第一個卡片和最後一個卡片貼齊邊緣
5. item的內容部分為了要讓文字在卡片正中間的位置，使用justify-content: center對齊主軸線正中間， align-items: center對齊交錯軸線正中間
6.文字是要蓋在圖片上，使用屬性position: absolute (絕對定位)讓他抽出來獨立一層，並且在txt的父層item內添加position: relative (相對定位)，作為子層定位的依據
7. font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距，text-align: center讓兩上下排文字置中對齊
8. 可以發現超連結文字一開始是沒有顯示的，因此這邊會在.item a內添加一個opacity: 0
9. 滑鼠游標移置link這裡的文字時會出現下底線，因此這邊要寫成.link:hover，使用border-bottom 製作1px的白色實線
10. 滑鼠游標移置item卡片時，會出現半透明的遮罩背景，使用偽元素.item:hover::before去製作，使用偽元素要添加content: ''接下來的調整才會顯示，同樣使用屬性position: absolute獨立一層，將他的寬高各設置100%，製作出符合盒模型的遮罩background-color: rgba(125, 44, 69, 0.5)
11. 消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決

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

HTML

<section>
    <div class="container">
        <div class="item">
            <div class="txt">
            <a href="#">厭世上班族</a>
            <a href="#" class="link">遇到無腦同事天天都想打</a>
            </div>
            <img src="https://i.ibb.co/PtPbd9r/mini1.jpg">
        </div>
        <div class="item">
            <div class="txt">
                <a href="#">假面笑臉,狼狽為奸</a>
                <a href="#" class="link">只要有錢什麼都好說</a>
            </div>
            <img src="https://i.ibb.co/rsV5yCQ/mini2.jpg">
        </div>
        <div class="item">
            <div class="txt">
            <a href="#">下班快跑,健步如飛</a>
            <a href="#" class="link">17：59還不收包包準備跑</a>                    
            </div>
            <img src="https://i.ibb.co/9VvmdzG/mini3.jpg">
        </div>
        <div class="item">
            <div class="txt">
            <a href="#">面面相覻,一個眼神</a>
            <a href="#" class="link">一個眼神你就懂我想說的</a>                    
            </div>
            <img src="https://i.ibb.co/k92JpCY/mini4.jpg">
        </div>
        <div class="item">
            <div class="txt">
            <a href="#">我愛錢錢,錢錢萬歲</a>
            <a href="#" class="link">社畜唯一的快樂就是領薪水</a>                    
            </div>
            <img src="https://i.ibb.co/r4JwwHc/mini5.jpg">
        </div>
        <div class="item">
            <div class="txt">
            <a href="#">神隊友,患難見真情</a>
            <a href="#" class="link">和同事增進感情的最快方式就是有共同敵人</a>                    
            </div>
            <img src="https://i.ibb.co/wRwH3YC/mini6.jpg">
        </div>
    </div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
}
.container{
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.container .item{
    margin: auto;
    width: 33.3333%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item .txt{
    position: absolute;
}
.item a{
    text-align: center;
    color: #fff;
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 2;
    opacity: 0;
    border-bottom: 1px solid transparent;
}
.item .link{
    font-size: 24px;
    font-weight: 800;
}

.item img{
    vertical-align: middle;
    width: 100%;
}
.item:hover a{
    opacity: 1; 
    transition: .3s;
}
.item a:hover .link{
    transition:.3s
}
.item .link:hover{
    border-bottom: 1px solid #fff;
    transition: .5s;
}
.item:hover::before{
    content: '';
    position: absolute;
    background-color: rgba(125, 44, 69, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    transition: .5s;
}