區塊卡片2

在這個範例中要練習多個卡片的排列以及游標移至卡片後的效果

整理幾個小重點如下方：

1.將section_card設為滿版
2.添加一個container，做為固定欄寬1200px的區塊
3.添加display: flex讓卡片橫向排列
4.使用justify-content: space-between平均分配剩餘空間寬度，讓第一個卡片和最後一個卡片貼齊邊緣
5.卡片外框設定border，並添加border-radius設定導圓角尺寸
6.卡片的外觀設定在超連結a上面，而a是inline物件，寬度大小是由內容撐開去決定的，設定尺寸會沒有效果，需要添加black的設定，這樣尺寸的設定才會有效果，並且超連結所覆蓋的範圍才是正確的
7.讓標題<h2>的文字一開始是沒有顯示的，因此這邊會添加一個opacity: 0
8.標題<h2>在滑鼠游標移至卡片後就會顯示，需要在.pic_list a:hover h2裡面添加opacity: 1文字就會在滑鼠移至卡片後跑出來了
9.將各個卡片及標題h2標籤添加transform: translate，設定Y軸做上下移動
10.滑鼠移至卡片後，卡片以及裡面的文字會有往上移動的效果，這邊一樣搭配hover，並在裡面添加transform: translateY(看你要移動多少的數值px);

補充：transform CSS 屬性可以讓你修改 CSS 可視化格式模型的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

提供格線圖如下方所示:

可參考程式碼如下方:

HTML

<section class="section_card">
    <div class="container">
        <div class="pic_list">
            <a href="#">
                <h2>早睡早起</h2>
                <img src="https://i.ibb.co/Ltb72Mf/mini-sleep.png"> 
            </a>
          </div>
       <div class="pic_list">
             <a href="#">
               <h2>搖呼拉圈</h2>
               <img src="https://i.ibb.co/QdNtGpx/mini-sport.png">
             </a>         
        </div>
        <div class="pic_list">
              <a href="#">
                  <h2>無言薯條</h2>
                  <img src="https://i.ibb.co/J5WCmrG/mini-speechless.png">                        
              </a>
                </div>
        <div class="pic_list">
                <a href="#">
                   <h2>你忍心嗎</h2>
                   <img src="https://i.ibb.co/fFRM63s/mini-cry.png">
                </a>                 
         </div>
         <div class="pic_list">
                <a href="#">
                    <h2>一臉困惑</h2>
                    <img src="https://i.ibb.co/hH1TYqk/mini-confuse.png">
                  </a>
         </div>
         <div class="pic_list">
                 <a href="#">
                     <h2>生日快樂</h2>
                     <img src="https://i.ibb.co/x6f6j3H/mini-brithday.png">
                 </a>
          </div>
    </div>
</section>

CSS

.section_card {
    width: 100%;
    margin:auto;
}
.section_card .container{
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin:auto;
}
.section_card .pic_list{
    width: 150px;
}
.section_card .pic_list img{
    width: 100%;
    vertical-align: bottom;
}
.section_card .pic_list a{
    display: block;
    width: 150px;
    background-color: #FFEBF2;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    transform: translateY(0px);
}
.section_card .pic_list h2{
    text-align: center;
    font-size: 16px;
    color: #464646;
    opacity: 0;
    transform: translateY(30px);
}
.section_card .pic_list a:hover{
    content: '';
    background-color: #ffc5d9;
    display: block;
    transform: translateY(-20px);
    transition: .3s;
}
.section_card .pic_list a:hover h2{
    opacity: 1;
    transition: .3s;
    transform: translateY(10px);
}

參考資料
https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform