CSS 筆記 - 金魚切版系列:02-圖文互動

這次筆記通用模板使用的圖文互動頁面，hover 效果會出現文字與一些動畫效果。

使用方法

CSS absolute 絕對定位。
CSS relative 相對定位。
transition 動畫的做法。
flex-direction 的原理。

HTML 架構

用一個 .wrap 把 .item 包起來，再把要呈現的圖片與文字呈現在 .item 內，共有四個，只要架構卻人無誤，複製四個即可。

<div class="wrap">
  <div class="item">
    <img src="https://picsum.photos/500/400?random=20" alt="" />
    <div class="content">
      <h2>Amos 金魚系列 II</h2>
      <p>圖文互動卡片練習</p>
    </div>
  </div>
</div>

SCSS 樣式

wrap 設定

讓 .wrap 內的元素填滿橫幅，並且使其內元素用 flex 橫向排列並自動置中。

.wrap {
  width: 100vw;
  display: flex;
  margin: 0 auto;
}

item 設定

使 .item 內的元素平均寬度，因為有四個，所以設定為 25%，使圖片填滿 item 寬度 25% 的空間。
圖片是行內元素，要使行內元素置中對齊可使用 vertical-align: middle;，並且圖片因為置中對齊後會在該元素下方出現莫名的多餘空間，使用此語法可以把該空間消除。

除了 baseline 外，都可以讓下面的空間消除。
使用絕對定位 absolute 讓 .content 的內容填滿整個 item，使四邊的距離都為 0，就會自動撐開四個角。
相對位置 relative 的元素當然就是 .item。
.content 使用 flex 讓裡面的文字垂直置中對齊。
opacity 透明度設定，使一開始文字為透明，寫入漸變效果，等等要對應設定 hover 後的效果。
h2

.item {
  width: 25%;
  position: relative;
  img {
    width: 100%;
    //使圖片下方莫名空間消除
    vertical-align: middle;
  }
  .content {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0 50px;
    background: rgba(#000, 0.6);
    //垂直置中對齊
    display: flex;
    justify-content: center;
    flex-direction: column;
    //先文字一開始為透明
    opacity: 0;
    //透明漸變時間
    transition: opacity 0.6s;
    cursor: pointer;
  }
  h2 {
    color: #00eaff;
    font-size: 32px;
  }
  p {
    color: #fff;
    padding: 5px 0;
    font-size: 18px;
  }
}

hover 效果

可以建立一個習慣是誰被 hover ，誰做事情，那跟著老師的習慣也是一種學習，所以就父層 hover ，子層做事情。

.item 有 hover 效果時，.content 的透明效果變為顯示 opacity:1。這時互動就會出現了，在加上 transition 效果，讓 opacity 的時間為 0.6s，就會有漸變效果，視覺上也較自然。

.item {
  width: 25%;
  position: relative;
  &:hover {
    .content {
      opacity: 1;
    }
  }
  img {
    width: 100%;
    vertical-align: middle;
  }
  .content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0 50px;
    background: rgba(#000, 0.6);
    display: flex;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.6s;
    cursor: pointer;
  }
  h2 {
    color: #00eaff;
    font-size: 32px;
  }
  p {
    color: #fff;
    padding: 5px 0;
    font-size: 18px;
  }
}

使用偽元素讓網頁互動效果更豐富 ::after

偽元素的使用可讓網頁增加更多的互動效果，就算 HTML 上沒有該元素，透過偽元素可以做更多事情。

要在 h2 下方加上一條橫線產生互動，這邊比較重要的 transition 後面指定的值可以單獨指定，跟前面指定 opacity 相同。
並且指定在 hover 後的效果占滿 .item 內的寬度 100%。
使 h2 底限用 transition 指定寬度漸變 0.5s，delay 0.3s。

.item {
  width: 25%;
  position: relative;
  &:hover {
    .content {
      opacity: 1;
    }
    h2::after {
      width: 100%;
    }
  }
  ... h2 {
    color: #00eaff;
    font-size: 32px;
    &::after {
      content: "";
      display: block;
      width: 0;
      height: 2px;
      margin: 5px 0;
      background-color: #00eaff;
      //使寬度漸變時間為 0.5s delay 0.3s
      transition: width 0.5s 0.3s;
    }
  }
}

這樣就完成啦!!

Codepen https://codepen.io/hnzxewqw/full/bGEjKKa

提姆寫程式