iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
0
Modern Web

喪屍黑白切系列 第 20

Day 20 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 2

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

本篇關鍵字

  • overflow: hidden
  • float
  • ::before::afterz-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 效果

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


上一篇
Day 19 | 我比較喜歡脆笛酥 - 方塊酥版面 Part 1
下一篇
Day 21 | 這些人都是我的小弟...是員工 - 人員介紹卡片
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言