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

左から右へ × 下から上に

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

左から右へ × 上から下に

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

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

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

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

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

下部中央から上に広がる

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

上部中央から下に広がる

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


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