今天要講的依舊是金魚都能懂的網頁切版 : 方塊酥版面 NO010，
這次要挑戰的是完全不用 flex 做出跟昨天一樣的版面，
在影片中，雖然圖片的排列是沒有用到 flex，
但是在 .text 內容的垂直居中上，還是使用到了 flex，
所以要就想要來寫看看完全不用 flex 的做法，
提供給覺得 flex 就是毒藥，少碰為妙的你。

本篇關鍵字

• overflow: hidden
• float
• ::before、::after、z-index

範例檔

HTML

  <div class="wrap">
    <div class="item">
      <img src="https://picsum.photos/500/500/?random=1">
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>偷昨天的內容，到今天已經寫了 20 篇 + 20 篇了</p>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/500/500/?random=2">
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>對於能堅持到今天，嗯覺得應該鼓勵一下自己</p>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/500/500/?random=3">
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>就決定今天的晚餐要去嗑牛排了，越想肚子越餓</p>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/500/500/?random=4">
      <div class="text">
        <h2>Zombie@Dump</h2>
        <p>長時間坐在電腦前面的你，記得要偶爾站起來 move your body</p>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/500/500/?random=5">
      <div class="text">
        <h2>Zombie@Dump</h2>
          <p>還有記得時時提醒自己要眨眨眼睛，不然眼睛會超容易乾</p>
      </div>
    </div>
  </div>

.wrap {
  width: 100%;
  overflow: hidden;
}

.item {
  float: left;
  position: relative;
}

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

.item:first-child {
  width: 50%;
}

.item:first-child~.item {
  width: 25%;
}

.item::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .6);
  opacity: 0;
  transform: scale(0);
  transition: .5s;
}

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

.item .text {
  padding: 20px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0;
  transition: .5s;
}

.item:hover .text {
  opacity: 1;
  transition: .5s .2s;
}

.item .text h2{
  display: inline-block;
  color: #0B346E;
  padding-bottom: 5px;
  margin-bottom: 10px;
  position: relative;
}

.item .text h2::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 5px;
  background-color: #0B346E;
  border-radius: 5px;
}

喪屍分解

• 設定 float: left 使 .item 並排排列
• 如果想要反過來的話，可以設定 float: right，但要注意一下順序
  
• .wrap 設定 overflow: hidden 來清除浮動，其他清除浮動的方式，歡迎參考 欸！不要這麼浮動好不好
• .text 設定 top: 50% 加上 transform: translateY(-50%) 來達成垂直置中
• 用 .item::after 做出 .text 背後的滿版透明白色區塊
• z-index 設定 .text 比 .item::after 前面
• 這種作法可以讓 .text 以及 .item::after 設定不同的 transition 效果

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是人員介紹卡片。