CSSの:hoverを使って画像の上にdivやspanを重ねて表示する方法

画像ホバー時にdivやspanをオーバーレイ表示させるテクニック

Web制作では、マウスカーソルが画像の上に乗ったとき（ホバー時）に、その画像の上へ別のコンテンツを重ねて表示したいケースがよくあります。たとえば、キャプションの表示やボタンの出現などが代表例です。

このようなオーバーレイ表示は、CSSの :hover 疑似クラスと .overlay クラスを組み合わせることで、JavaScriptを使わずに簡単に実現できます。

実装のポイント

• 絶対配置の活用： .overlay 要素を親要素基準で position: absolute により配置します。
• 親要素の設定： 親要素には position: relative と display: inline-block を指定し、画像のサイズに合わせて幅・高さを100%にします。

HTMLの構造

<div class="image">
   <img src="..." />
   <div class="overlay">ホバー時に表示するコンテンツ</div>
</div>

CSSの記述例

デフォルト状態では .overlay 要素を非表示（display: none）にしておきます。そして .image:hover .overlay セレクターを使うことで、ホバー時のみスタイルを切り替えます。.overlay は .image の子孫要素であるため、このセレクターはHTML構造上うまく機能します。

.image {
    position: relative;
    display: inline-block;
}

.overlay {
    display: none;
}

.image:hover .overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* その他のスタイル調整 */
.image img {
    vertical-align: top;
}

補足：モダンブラウザへの対応

上記のコードにある -webkit- や -moz- のベンダープレフィックスは、古いブラウザ向けのものです。現在の主要ブラウザでは box-sizing プロパティはプレフィックスなしで動作するため、必要に応じて省略しても問題ありません。

また、表示をより滑らかにしたい場合は、opacity と transition プロパティを組み合わせることで、フェードイン・フェードアウトのアニメーション効果を追加することもできます。