Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

CSSのみでホバー時に文字表示

f:id:sgwshu:20170820074255j:plain

こんにちは。毎日更新頑張ってます。今日はCSSでマウスを乗せた時に画像の色が変化して文字を表示するホバーアクションに挑戦したので初心者でもわかりやすく書いていこうと思います。

 

Codeペン

重なってるとこがわかるようにマスクのサイズは画像サイズよりも大きく設定してます。

 

仕組み 

大まかに3つの要素から構成されています。

  • ホバーアクションのDiv
  • 画像
  • マスク

上に表示される文字です。

そしてマウスを画像の上にのせた時に透明だったマスクがhover動作によって透明じゃない状態に変化させられてマスクが出てきたように見えると言う仕組みです。

詳しい解説はコメントにてcodepen内に書いてます。

 

まとめ

CSSだけで画像ホバー時に、文字と違う画像を表示させる動作を作ることは簡単にできます!!!