前言
到現在還是常常出沒在各個網頁的基本構圖，揉和了 flex 、 position 、 opacity 和偽元素等等語法，日後若再稍加調整即可產出多種變化。（ 想更了解 flex 屬性的話可以看看 CSS保健室｜flex ）
CSS
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Noto Sans TC', sans-serif;
}
.wrap {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.item {
width: 25%;
position: relative;
}
.item img {
width: 100%;
vertical-align: middle;
}
.item .txt {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px;
background-color: rgba(0,0,0,.6);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
opacity: 0;
transition: opacity .5s;
}
.item:hover .txt {
opacity: 1;
}
.item h2 {
font-size: 28px;
color: #ff0;
font-weight: 500;
}
.item h2:after {
content: '';
display: block;
width: 0;
height: 2px;
margin: 10px 0;
background-color: #ff0;
transition: width .5s .5s;
}
.item:hover h2:after {
width: 100%;
}
.item p {
font-size: 18px;
color: #fff;
font-weight: 100;
}
</style>
HTML
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/500/400?random=10">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=5">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-2</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=20">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-3</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/500/400?random=30">
<div class="txt">
<h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-4</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
</div>
</div>
</div>
最後奉上 CSScoke 的影片教學
