# 金魚系列:製作一個互動圖文卡片(有問題待處理)

---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

這個單元是要製作一個網頁包含了四張圖片然後當你沒有觸摸圖片的時候，文字不會顯示，當你觸摸的時候文字緩緩顯現然後附帶著分隔線的特效。


接下來我們來看程式碼:

最外層的wrap包裹住全部的內容讓它可以更好的安排四個容器的位置，接下來的item是四個小容器裡面包裹住文字txt以及圖片img

<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>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
        </div>
    </div><div class="item">
        <img src="
        https://picsum.photos/500/400?random=20">
        <div class="txt">
            <h2>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
        </div>
    </div><div class="item">
        <img src="
        https://picsum.photos/500/400?random=8">
        <div class="txt">
            <h2>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
        </div>
    </div>
</div>

---------------------
呈現內容如下:

<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>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
</div>
</div><div class="item">
<img src="
https://picsum.photos/500/400?random=20">
<div class="txt">
<h2>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
</div>
</div><div class="item">
<img src="
https://picsum.photos/500/400?random=8">
<div class="txt">
<h2>金魚都能懂得這個網頁畫面怎麼切 :互動圖文卡片</h2>
<p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉喽。</p>
</div>
</div>
</div>

-----------------------

接下來我們參閱css的部分:

首先一樣一個全域下去

*{
            margin: 0;
            padding: 0;
            list-style: none;   
            font-family: 'Noto Sans TC', sans-serif;
        }

--------------

設定最外層的wrap 寬度100% 讓四個item可以帶有RWD的網頁的感覺(可以縮放)，接下來的flex讓四個item可以做出並排的動作。

.wrap{
            width: 100%;
            display: flex;
        }

-------------------

item的部分讓他寬度25%因為要切成四個position的部分則是因為要搭配子層(文字的部分)所以在這邊設置relative。

.item{
            width: 25%;
            position: relative;
        }

--------

# img設置的比較簡單，一樣設定寬度因為是要滿item的容器所以設定100%，然後下方的vertical-align 圖片垂直對齊該行文字的置中位置。(這邊有使用跟沒有使用有一點點差異但我不太理解)

.item img{
            width: 100%;
            vertical-align: middle;
        }

-------------------

**這個部分是設定內文的位置、大小、背景色、特效(比較重要)**

* position: absolute 以及下方的位置都是控制文字的位置，背景顏色

* display:flex來讓文字並排並且不用計算paddingborder等等

* opacity這邊為了特效先設定透明

* transition的部分是特效 然後延遲0.5s

* .item:hover .txt的部分是觸碰到的時候透明消失讓物件顯現

.item .txt{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 20px;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            justify-content: center;
            flex-direction: column;
            opacity: 0;
            transition: opacity .5s;
        }
}
.item:hover .txt{
            opacity: 1;
        }

----------

這邊是內文的標題(h2)的部分

item是在處理文字大小、文字顏色、文字的粗細

.item h2:after

處理底線設定

block是為了讓它換行，因為block元素特性可以佔走一整行
寬度 高度 margin 背景色 的處理

特效的部分
transition:width .5s .3s

前面的width表示要處理的是width讓它從0跑成100 簡單來說就是讓他從沒有出現變成出現

前面的秒數代表跑多久

後面的秒數表示延遲多久

.item h2{
            font-size: 18px;
            color: #ffff00;
            font-weight: 500;
        }
        
.item h2:after{
            content:'';
            display: block;
            width: 0%;
            height: 2px;
            margin: 10px 0;
            background-color:#ffff00 ;
            transition:width .5s .3s;
        }
        
.item:hover h2::after{
            width: 100%;
        }

--------------

最後設定剩下的內文處理
簡單的大小顏色文字粗細

.item p{
            font-size: 20px;
            color: #ffffff;
            font-weight: 100;
        }