はてなブックマーク

画像などの要素にマウスカーソルを重ねることをマウスオーバーといい、マウスオーバー時に対象の要素に動きをつけたり、文字を表示させたりするなどのエフェクトのことをホバーエフェクトといったりします。 よく見かけるホバーエフェクトは、次の画像をマウスオーバーするとわかるように、画像の上に黒い透過マスクをかけて白文字を表示させるエフェクト。 Lorem Ipsum is simply dummy text of the printing and typesetting industry. これはJavaScriptやjQueryを使わなくても、CSSで実装することができます。 また、表示させるタイミングをゆっくりにしたり、マスクをスライドさせて表示させたりと、実に様々なホバーエフェクトがあります。 なので、画像をマウスオーバーした時にマスクをかけて文字を表示させる色々なエフェクトをまとめました。 黒