CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでホバー時に画像オーバーレイタイトルを作成する方法

CSSを使えば、JavaScriptに頼らなくても、画像にマウスカーソルを重ねた（ホバーした）瞬間にタイトルやキャプションをオーバーレイ表示できます。本記事では、position・opacity・transition・:hoverを組み合わせた基本的な実装方法を、サンプルコード付きで解説します。

仕組みのポイント

  • position: relative / absolute … 親要素（カードコンテナー）を基準に、オーバーレイを画像の下端へ絶対配置します。
  • opacity: 0 → 1 … 通常時はオーバーレイを完全に透明にしておき、ホバー時に不透明へ切り替えます。
  • transition … 透明度の変化にアニメーションを加え、自然なフェードイン効果を生み出します。
  • :hover セレクター … 親要素がホバーされたときに、子要素（オーバーレイ）のスタイルを変更します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.card-container {
    position: relative;
    width: 50%;
}
.image {
    display: block;
    width: 100%;
    height: auto;
}
.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(48, 9, 155, 0.5);
    width: 78%;
    transition: .5s ease;
    opacity:0;
    color: rgb(251, 255, 0);
    font-size: 25px;
    font-weight: bolder;
    padding: 20px;
    text-align: center;
}
.card-container:hover .overlay {
    opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title Example</h2>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg" >
<div class="overlay">Dog</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、最初は画像のみが表示されます。

CSSでホバー時に画像オーバーレイタイトルを作成する方法

画像にマウスカーソルを重ねると、画像の下端に沿って半透明の紫の帯が現れ、黄色い太字で「Dog」というキャプションがフェードイン表示されます。

CSSでホバー時に画像オーバーレイタイトルを作成する方法

まとめ

この手法は、親要素の:hoverに対して子要素のopacityを切り替えるだけで実現できるため、ギャラリーやカード型レイアウトなど、さまざまな場面で応用できます。背景色のRGBA値やtransitionの時間を調整すれば、サイトのデザインに合わせた演出も簡単に実装可能です。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>