卡片版面4

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

整理幾個小重點如下方：

1.將section設為滿版
2.添加一個container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.使用justify-content: space-between平均分配剩餘空間寬度，讓第一個卡片和最後一個卡片貼齊邊緣
4.滑鼠游標移至卡片後就會出現半透明遮罩，將遮罩使用偽元素::after去製作，使用偽元素要添加content: ''才會顯示效果 5.半頭明遮罩是設定在超連結上寫成.item:hover a::after，而<a>是inline物件，寬度大小是由內容撐開去決定的，設定尺寸會沒有效果，因此這邊需要添加black的設定，這樣尺寸的設定才會有效果，並設置寬高各100%，製作出符合盒模型的遮罩background-color: rgba(0, 0, 0, .5);
6.文字是要蓋在圖片上，使用屬性position: absolute (絕對定位)讓他抽出來獨立一層，並且在text的父層item內添加position: relative (相對定位)，作為子層定位的依據
7.消除圖片的預設空白，使用vertical-align屬性設為top、text-top、bottom、text-bottom擇一就可以解決
8.滑鼠游標移至卡片後標題h3會向上偏移，以及會出現段落p向下偏移的效果，因此要個別添加position: relative並分別設定偏移的數值，可以呈現交錯移動的效果
9.段落p的文字一開始是沒有顯示的，因此這邊會添加一個opacity: 0
10.段落p的文字在滑鼠游標移至卡片後就會顯示，因此需要在.item:hover p裡面添加opacity: 1文字就會在滑鼠移至卡片後跑出來了
11.設定width: 60px的圓形按鈕，添加aspect-ratio製作等比例縮放區塊，讓物件保持固定的寬高比例
12.圓形按鈕內的箭頭使用偽元素.circle_arrow::before，使用偽元素要添加content: ''接下來的調整才會顯示，添加position: absolute讓它獨立出來一層，偏移至適當的位子
13.滑鼠游標移至卡片後，按鈕會等比例放大，使用transform: scale(1.1)，來製作此效果，scale指的是縮放比例(scale)，根據設定的數值顯示放大或縮小，只設定一個數值時，使用相同的比例縮放，如果設定兩個值，則分別為水平放大或垂直放大，大於1代表放大，小於1代表縮小
14.消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決

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

HTML

<section>
    <div class="container">
        <div class="item">
            <a href="#">
                <div class="pic">
                    <img src="https://i.ibb.co/mcsrJS1/mini-eat.jpg" alt="">
                </div>
                <div class="text">
                    <h3>肚子餓了</h3>
                    <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖...
                    </p> 
                    <div class="circle_arrow"></div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <div class="pic">
                    <img src="https://i.ibb.co/mcsrJS1/mini-eat.jpg" alt="">
                </div>
                <div class="text">
                    <h3>肚子餓了</h3>
                    <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖...
                    </p> 
                    <div class="circle_arrow"></div>
                </div>
            </a>
        </div>
        <div class="item">
            <a href="#">
                <div class="pic">
                    <img src="https://i.ibb.co/mcsrJS1/mini-eat.jpg" alt="">
                </div>
                <div class="text">
                    <h3>肚子餓了</h3>
                    <p>可愛的小白人，進入你的日常生活，是一隻從十幾歲開始寫卡片後會畫的可愛小圖...
                    </p> 
                    <div class="circle_arrow"></div>
                </div>
            </a>
        </div>
    </div>
</section>

CSS

.section {
	width: 100%;
	margin: auto;
}
.container {
	width: 1200px;
	margin: auto;
	display: flex;
	padding-top: 100px;
	justify-content: space-between;
}
.item {
	position: relative;
	width: 320px;
}
.item a {
	display: block;
	color: #ffffff;
	background-color: pink;
}
.item:hover a::after {
	content: '';
    width: 100%;
    height: 100%;
	background-color: rgba(0, 0, 0, .5);
	position: absolute;
	top: 0;
	transition: .3s;
}
.item .text {
	position: absolute;
	top: 0;
	padding: 20px;
	z-index: 1;
}
.item .pic {
	width: 320px;
}
.item img {
	width: 100%;
	vertical-align: bottom;
}
.item h3 {
	position: relative;
	top: 60px;
}
.item p {
	position: relative;
	top: -60px;
	opacity: 0;
}
.item:hover h3 {
	top: 0px;
	transition: .5s;
}
.item:hover p {
	top: 0;
	opacity: 1;
	transition: .5s;
}
.circle_arrow {
	width: 60px;
	aspect-ratio: 1/1;
	position: relative;
	border-radius: 50%;
	border: 1px solid #ffffff;
	background-color: #ffffff;
}
.circle_arrow::before {
	content: url(https://i.ibb.co/kHj5kh7/arrow2-01.png);
	position: absolute;
	top: 20px;
	left: 25px;
}
.item:hover .circle_arrow {
	transform: scale(1.1);
	transition: 0.5s;
	background-color: #ffffff00;
}
.item:hover .circle_arrow::before {
	content: url(https://i.ibb.co/dMvxCjf/arrow1-01.png);
	transform: scale(1);
}