卡片版面2

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

整理幾個小重點如下方：

1.將section設為滿版
2.添加一個container，做為固定欄寬1200px的區塊
3.排版方式為左文右圖，因此在container設定display: flex讓資料橫排顯示
4.將item寬度設為400px，剛好平均分配三個卡片寬度
5.每個卡片的背景顏色要不一樣，需要分開設定每一塊地色票，可以使用:nth-child()，括號內填入項目的順序即可完成指定，就可以在不改變HTML結構下分別修改好效果
6. font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距
7. txt內有使用到span標籤，因為span是inline物件，需要添加設定display: block才可以完成文字換行
8. span下方有一條橫線，使用偽元素::after去製作，使用偽元素要添加content: ''接下來的調整才會顯示，偽元素是inline物件，需要添加設定display: block，接下來尺寸的設定才會有效果，在這邊調整為寬50px、2px的實心白色橫線
9. 游標移置item後背景改變顏色，寫法為.item:hover
10.需要將img添加position: absolute讓它獨立出來一層，偏移至適當的位子
11.在item內添加position: relative，作為img定位的依據
12.滑鼠游標移至卡片後圖片會由右往左移動因此在設定定位後需要再添加right: -10px
13.設定負值定位超出原本卡片item的範圍，這邊就使用overflow: hidden，超過此範圍的都會被蓋掉
14.設定圖片img的尺寸為width: 100px，添加aspect-ratio製作等比例縮放區塊，讓物件保持固定的寬高比例
15.可以發現圖片一開始是沒有顯示的，因此這邊會在img內添加一個opacity: 0
16.圖片img在游標移至卡片後就會顯示，因此需要在.item:hover img裡面添加opacity: 1以及right: 80px，圖片就會在滑鼠移至卡片後由右往左移動顯示
17.下方的段落文字也是相同方式，在游標移至卡片後就會由下往上出現，在p添加一個opacity: 0，.item:hover p則添加opacity: 1

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

HTML

<section>
<div class="container">
    <div class="item">
        <div class="txt">
            <span>小小白人系列1</span>
            <h2>你忍心嗎</h2>
            <p>我這麼可愛你忍心嗎我這麼可愛你忍心嗎我這麼可愛你忍心嗎我這麼可愛你忍心嗎我這麼可愛你忍心嗎我這麼可愛你忍心嗎我這麼可愛你忍心嗎</p>
        </div>
        <div class="pic">
            <img src="https://i.ibb.co/fFRM63s/mini-cry.png alt="">
        </div>
    </div>
    <div class="item">
        <div class="txt">
            <span>小小白人系列2</span>
            <h2>生日快樂</h2>
            <p>祝你生日快樂~祝你生日快樂~祝你生日快樂~祝你生日快樂~祝你生日快樂~祝你生日快樂~祝你生日快樂~祝你生日快樂~</p>
        </div>
        <div class="pic">
            <img src="https://i.ibb.co/x6f6j3H/mini-brithday.png" alt="">
        </div>
    </div>
    <div class="item">
        <div class="txt">
            <span>小小白人系列3</span>
            <h2>早睡早起</h2>
            <p>早起的鳥兒有蟲吃 早起的蟲兒被鳥吃早起的鳥兒有蟲吃 早起的蟲兒被鳥吃早起的鳥兒有蟲吃 早起的蟲兒被鳥吃</p>                    
        </div>
        <div class="pic">
            <img src="https://i.ibb.co/Ltb72Mf/mini-sleep.png" alt="">
        </div>

    </div>
</div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
}
.container{
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 50px;
}
.item{
    width: 400px;
    padding: 50px 20px;
    color:#fff;
    position: relative;
    overflow: hidden;
}
.item:nth-child(1){
    background-color: #f8c6c6;
}
.item:nth-child(2){
    background-color: #ffbebe;
}
.item:nth-child(3){
    background-color: #fcc1c1;
}
.item .txt{
    position: relative;
    top: 90px;
    z-index: 1;
}
.item span{
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.5px;
    display: block;
}
.item span::after{
    content: '';
    display: block;
    width: 50px;
    border-bottom: 2px solid #fff;
    padding-bottom: 30px;
}
.item h2{
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 20px 0;
}
.item p{
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 1px;
    opacity: 0;
}
.item img{
    position: absolute;
    top: 10px;
    right: -10px;
    width: 100px;
    aspect-ratio: 100/133;
    opacity: 0;
}
.item:hover{
    background-color: #f7b1b1;
    transition: .5s;
}
.item:hover .txt{
    top:0;
    transition: .5s;
}
.item:hover p{
    opacity: 1;
    transition: .5s;
}
.item:hover img{
    right: 80px;
    transition: .5s;
    opacity: 1;
}