CSS:分割されたマスクがパラパラと表示されるクールなホバーエフェクト

CSS:分割されたマスクがパラパラと表示されるクールなホバーエフェクト

CSSを使用して表現したかっこいいホバーエフェクトやボタンデザインを多数作成・公開している「LittleSnippets.net」を眺めていて、個人的に好みなホバーエフェクトを見かけたので備忘録です。
イメージにホバーすると半透明のマスクを被せてテキストを表示するというエフェクトは当ブログでも過去に紹介したこともありますし、一般的にも比較的よく見かけるようになりましたが、以下で紹介するのはそのマスク表示が分割されていて、それぞれがパラパラと表示されるタイプ(わかりやすい言い回しが思い浮かびませんでした...)のものになります。

文章だとわかりづらいと思うので、動きについてはそれぞれ以下CodePenのデモで確認してもらうとわかると思います。
また、動きはスマートフォンなどでは確認できないのでPCで閲覧してください。

左から右へ × 下から上に

横方向の動きで左から右に向かってパラパラと表示され、縦方向の動きでは下から上にマスクが表示されるエフェクトです。

See the Pen #1446 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

左から右へ × 上から下に

横方向の動きは同じく左から右に向かって表示されますが、こちらは縦方向の動きが上から下になったものです。

See the Pen #1463 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

左から右へ × 中央から上下に

横方向で左から右に向かって表示され、縦方向は中央から上下に向かって広がっていく感じのエフェクトです。

See the Pen #1439 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

右から左へ × 中央から上下に

同じく縦方向は中央から上下に向かって広がっていく感じのエフェクトで、横方向は右から左に向かって表示されます。

See the Pen #1421 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

下部中央から上に広がる

こちらは下部中央から上に向かってマスクが表示されていくものです。

See the Pen #1407 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

上部中央から下に広がる

こちらは先ほどとは逆で、上部中央から下に向かってマスクが表示されていくものです。

See the Pen #1382 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

マスクの分割数を増やす

上記それぞれの動きを確認してもらうとわかりますが、いずれのデモもマスクの分割数は4分割になっており、実装方法としてはfigurefigcaptionの擬似要素(:before, :after)を利用して再現しています。
なので、もしこのエフェクトを使わせてもらいたいけど分割表示をもっと増やしたいという場合は、以下のようにマスク表示用の要素を追記して同じようにスタイルを記述していけば実装可能です。

決してスマートな方法とは言えませんが、以下は「左から右へ × 下から上に」で紹介したものをベースにしつつ実際にマスクを10分割してみたものです。
5枚目以降は<div class="mask"></div>の擬似要素を利用して表示しており、サイズは10分割なのでwidth: 10%;に変更して、それぞれのlefttransition-delayの値も記述していきます。
また、もともとのスピードだと表示時間が遅い感じだったので、transition-delayの値は少し短めに設定してあります。

HTML

<figure>
  <img src="img.jpg" />
  <figcaption>
    <h2>lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur ...</p>
    <div class="icons">
      <a href="#"><i class="ion-chatbubbles"></i></a>
      <a href="#"><i class="ion-person-add"></i></a>
      <a href="#"><i class="ion-heart"></i></a>
    </div>
    <div class="mask mask01"></div>
    <div class="mask mask02"></div>
    <div class="mask mask03"></div>
  </figcaption>
</figure>

※デモには記述していますが、ここではCSSのプレフィックスは省略しています。

CSS

figure {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  max-height: 230px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
}
figure * {
  box-sizing: border-box;
  transition: all .35s ease;
}
figure img {
  opacity: 1;
  width: 100%;
}
figure:after,
figure:before,
figure figcaption:after,
figure figcaption:before,
figure .mask:after,
figure .mask:before {
  background: #0a0a0a;
  width: 10%;
  position: absolute;
  content: '';
  opacity: 0;
  transition: all .3s steps(10);
  z-index: -1;
  top: 100%;
  bottom: 0;
}
figure:before {
  left: 0;
  z-index: 1;
  transition-delay: 0;
}
figure:after {
  left: 10%;
  z-index: 1;
  transition-delay: .05s;
}
figure figcaption:before {
  left: 20%;
  transition-delay: .1s;
}
figure figcaption:after {
  left: 30%;
  transition-delay: .15s;
}
figure .mask01:before {
  left: 40%;
  transition-delay: .2s;
}
figure .mask01:after {
  left: 50%;
  transition-delay: .25s;
}
figure .mask02:before {
  left: 60%;
  transition-delay: .3s;
}
figure .mask02:after {
  left: 70%;
  transition-delay: .35s;
}
figure .mask03:before {
  left: 80%;
  transition-delay: .4s;
}
figure .mask03:after {
  left: 90%;
  transition-delay: .45s;
}
figure figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 30px;
}
figure h2,
figure p,
figure .icons {
  margin: 0;
  width: 100%;
  opacity: 0;
}
figure h2 {
  font-weight: 900;
  text-transform: uppercase;
}
figure p {
  font-weight: 300;
}
figure .icons {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
}
figure i {
padding: 0px 10px;
display: inline-block;
font-size: 24px;
color: #ffffff;
text-align: center;
opacity: .8;
}
figure i:hover {
  opacity: 1;
}
figure:hover:after,
figure:hover:before,
figure:hover figcaption:after,
figure:hover figcaption:before,
figure:hover .mask:before,
figure:hover .mask:after {
  top: 0;
  opacity: .8;
}
figure:hover figcaption h2,
figure:hover figcaption p,
figure:hover figcaption .icons {
  opacity: 1;
  transition-delay: .8s;
}

See the Pen Image Hover by Naoya (@nxworld) on CodePen.


冒頭にも書いたように、このエフェクトをもともと掲載している「LittleSnippets.net」では他にもクールなエフェクトが多数まとめられています。
ボタンなどの要素で何かホバーで動きをつけたいけどどんなエフェクトにしようか悩むという時にもヒントになりますし、ナビやプライステーブルなどその他の要素もまとめられて参考になります。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.