今天要講的是金魚都能懂的網頁切版 : 互動圖文卡片 NO002

本篇關鍵字

• position: absolute
• top: 0、right: 0、bottom: 0、left: 0
• :hover、transform、transition

範例檔

HTML

  <div class="item-group">
    <div class="item">
      <div class="pic">
        <img src="https://picsum.photos/500/500/?random=1">
      </div>
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>哈囉哈囉～我是住在垃圾場的喪屍，感謝你點進來</p>
      </div>
    </div>
    <div class="item">
      <div class="pic">
        <img src="https://picsum.photos/500/500/?random=2">
      </div>
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>其實我挑戰了兩個鐵人唷～一個是這邊的喪屍黑白切</p>
      </div>
    </div>
    <div class="item">
      <div class="pic">
        <img src="https://picsum.photos/500/500/?random=3">
      </div>
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>另一個就是網頁學習雜記，記錄一些筆記或是經歷</p>
      </div>
    </div>
    <div class="item">
      <div class="pic">
        <img src="https://picsum.photos/500/500/?random=4">
      </div>
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>希望我寫的內容能稍微幫助到一些在奇怪地方糾結卡住的人們</p>
      </div>
    </div>
  </div>

CSS

body{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}

.item-group{
  display: flex;
}

.item{
  position: relative;
  cursor: pointer;
}

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

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

.item:hover .text{
  transform: scale(1);
}

.text h2{
  color: #D7B98E;
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
}

.text h2::after{
  content:'';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color:#D7B98E;
  transition: .8s .3s;
}

.item:hover .text h2::after{
  width: 100%;
}

.text p{
  color: #fff;
  line-height: 1.7;
}

喪屍分解

• .text 設定 position: absolute，其父層 .item 設定 position: relative，將.text 定在 .item 上
• .text 設定 top: 0、right: 0、bottom: 0、left: 0，.text 空間會等同於整個父層範圍
• 再利用 flex 將 .text 中的文字垂直置中
• 使用超常見的 ::after 做出 h2 下方底線
• :hover 搭配::after scale設定，就可以做出長出底線的效果(也有設定width 或是 right 的做法)
• 設定 transition 搭配 transition-delay 就可以做出底線較晚長出的效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是訊息對話紀錄。