画像などの要素にマウスカーソルを重ねることをマウスオーバーといい、マウスオーバー時に対象の要素に動きをつけたり、文字を表示させたりするなどのエフェクトのことをホバーエフェクトといったりします。見かけるホバーエフェクトは、次の画像をマウスオーバーするとわかるように、画像の上に黒い透過マスクをかけて白文字を表示させるエフェクト。industry.これはJavaScriptやjQueryを使わなくても、CSSで実装することができます。表示させるタイミングをゆっくりにしたり、マスクをスライドさせて表示させたりと、実に様々なホバーエフェクトがあります。画像をマウスオーバーした時にマスクをかけて文字を表示させる色々なエフェクトをまとめました。共通のHTML/CSS以下のHTMLとCSSは、これから紹介するホバーエフェクトの共通している部分です。一部クラス名を変えたりしていますが、基本的に構造は同じ。figure要素で囲った箱の中に画像とマスクをかけるキャプション用の箱が入っているという感じです。30px;}イメージとしては、当然最初に画像は表示されていて、マスクをかけるキャプション用の箱はopacityプロパティで「0」にすることで表面上は見えないようにしてあり、マウスオーバーするとopacityプロパティで「1」を指定して表示させるというだけのこと。画像の上に重ねるのには、positionプロパティを使用して絶対位置で指定します。背景色の黒を透過させたり、白文字の位置などは、あらかじめ指定しておく必要があります。rotateY(0);}まとめ画像をマウスオーバーしたときに黒の透過マスクをかけて白文字を表示させる色々なホバーエフェクトを紹介しました。参考にしてもらえたらなと思いますし、他にも様々な表現の方法があると思うので、自分で試してみてください。最後に、この記事内で出てきたCSSのプロパティについて、知らないプロパティがあれば下の記事で確認してください。*Website次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。KUBOGENサイトマップ。