画像のマウスオーバー時に文字を表示させるエフェクトをCSSで実装

画像などの要素にマウスカーソルを重ねることをマウスオーバーといい、マウスオーバー時に対象の要素に動きをつけたり、文字を表示させたりするなどのエフェクトのことをホバーエフェクトといったりします。

よく見かけるホバーエフェクトは、次の画像をマウスオーバーするとわかるように、画像の上に黒い透過マスクをかけて白文字を表示させるエフェクト。

コーヒー — Lorem Ipsum is simply dummy text of the printing and typesetting industry.

これはJavaScriptやjQueryを使わなくても、CSSで実装することができます。

また、表示させるタイミングをゆっくりにしたり、マスクをスライドさせて表示させたりと、実に様々なホバーエフェクトがあります。

なので、画像をマウスオーバーした時にマスクをかけて文字を表示させる色々なエフェクトをまとめました。

黒い透過マスクと白文字を表示
ふわっと表示
下からふわっと表示
上からふわっと表示
白文字が拡大しながら表示
黒の透過マスクも中心から拡大しながら表示
上からスライドして表示
左からスライドして表示
縦に180度回転して表示
横に180度回転して表示
斜めに180度回転して表示
横に360度回転して表示
奥から回転しながら表示
手前から回転しながら表示
扉が閉まるように表示

共通のHTML/CSS

以下のHTMLとCSSは、これから紹介するホバーエフェクトの共通している部分です。

一部クラス名を変えたりしていますが、基本的に構造は同じ。figure要素で囲った箱の中に画像とマスクをかけるキャプション用の箱が入っているという感じです。

HTML
<figure class=”hover-parent”>
　<img src=”image.jpg”/>
　<figcaption class=”hover-mask”>
　Lorem Ipsum is simply dummy text of the printing and typesetting industry.
　</figcaption>
</figure>

CSS
figure.hover-parent {
　width: 250px;
　height: 175px;
　position: relative;
　margin-bottom: 30px;
　overflow: hidden;
}
figcaption.hover-mask {
　width: 250px;
　height: 175px;
　position: absolute;
　top: 0;
　bottom: 0;
　left: 0;
　right: 0;
　background: rgba(0,0,0,0.5);
　opacity: 0;
　color: #fff;
　display: flex;
　align-items: center;
　text-align: center;
　padding: 30px;
}

イメージとしては、当然最初に画像は表示されていて、マスクをかけるキャプション用の箱はopacityプロパティで「0」にすることで表面上は見えないようにしてあり、マウスオーバーするとopacityプロパティで「1」を指定して表示させるというだけのこと。

画像の上に重ねるのには、positionプロパティを使用して絶対位置で指定します。

また、背景色の黒を透過させたり、白文字の位置などは、あらかじめ指定しておく必要があります。

黒の透過マスクと白文字を表示

figure.hover-parent:hover .hover-mask {
　opacity: 1;
}

ふわっと表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
}

下からふわっと表示

figcaption.hover-mask {
　opacity: 1;
　transition: all 0.6s ease;
　padding-bottom: 0;
}
figure.hover-parent:hover .hover-mask {
　padding-bottom: 30px;
}

上からふわっと表示

figcaption.hover-mask {
　opacity: 1;
　transition: all 0.6s ease;
　padding-top: 0;
}
figure.hover-parent:hover .hover-mask {
　padding-top: 30px;
}

白文字が拡大しながら表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
}
figure.hover-parent:hover .hover-mask {
　transform: scale(1.2);
}

黒の透過マスクも中心から拡大しながら表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: scale(0);
}
figure.hover-parent:hover .hover-mask {
　transform: scale(1);
}

上からスライドして表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　top: -100%;
}
figure.hover-parent:hover .hover-mask {
　top: 0;
}

左からスライドして表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　left: -100%;
}
figure.hover-parent:hover .hover-mask {
　left: 0;
}

縦に180度回転して表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: rotateX(-180deg);
}
figure.hover-parent:hover .hover-mask {
　transform: rotateX(0deg);
}

横に180度回転して表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: rotateY(-180deg);
}
figure.hover-parent:hover .hover-mask {
　transform: rotateY(0deg);
}

斜めに180度回転して表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: rotateX(-90deg) rotateY(-90deg);
}
figure.hover-parent:hover .hover-mask {
　transform: rotateX(0) rotateY(0);
}

横に360度回転して表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
}
figure.hover-parent:hover .hover-mask {
　transform: rotate(360deg);
}

奥から回転しながら表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: rotate(90deg) scale(0);
}
figure.hover-parent:hover .hover-mask {
　transform: rotate(360deg) scale(1);
}

手前から回転しながら表示

figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform: rotate(90deg) scale(3);
}
figure.hover-parent:hover .hover-mask {
　transform: rotate(360deg) scale(1);
}

扉が閉まるように表示

figure.hover-parent {
　transform-style: preserve-3d;
　perspective: 1500px;
　perspective-origin: 0 50%;
　overflow: visible;
}
figcaption.hover-mask {
　opacity: 1;
　transition:all 0.6s ease;
　transform-origin: 0;
　transform: rotateY(-90deg);
}
figure.hover-parent:hover .hover-mask {
　transform: rotateY(0);
}

まとめ

画像をマウスオーバーしたときに黒の透過マスクをかけて白文字を表示させる色々なホバーエフェクトを紹介しました。

ぜひ参考にしてもらえたらなと思いますし、他にも様々な表現の方法があると思うので、自分で試してみてください。

最後に、この記事内で出てきたCSSのプロパティについて、知らないプロパティがあれば下の記事で確認してください。