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

CSSだけで実装！ホバー時に画像へアイコンをオーバーレイ表示する方法

CSSだけでも、画像にマウスカーソルを重ねたとき（ホバー時）にアイコンやキャプションをオーバーレイ表示するエフェクトを簡単に実装できます。ここでは、opacity・transition・:hoverセレクタを組み合わせた定番の手法を紹介します。

実装のポイント

  • position: relative と absolute … 親要素（カードコンテナ）を基準に、オーバーレイ用のレイヤーを絶対配置で重ねます。
  • opacity の切り替え … 通常時は「0」（非表示）、ホバー時は「1」（表示）にすることでフェード効果を作り出します。
  • transition … 変化に時間的なゆとりを持たせることで、なめらかなフェードイン・フェードアウトを実現します。
  • backface-visibility: hidden … トランジション中のちらつきを防止し、表示を安定させます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" 
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
    box-sizing: border-box;
}
.card-container {
    display: inline-block;
    position: relative;
    width: 50%;
}
img {
    opacity: 1;
    display: block;
    width: 100%;
    transition: .5s ease;
    backface-visibility: hidden;
}
.hoverText {
    position: absolute;
    top:0;
    height: 100%;
    transition: .5s ease;
    opacity: 0;
    width: 100%;
    text-align: center;
}
.card-container:hover .hoverText {
    opacity: 1;
}
.caption {
    background-color: rgb(18, 53, 131);
    color: white;
    font-size: 30px;
    padding-top:30%;
    border-radius: 6px;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay Icon Example</h1>
<div class="card-container">
<img src="https://i.picsum.photos/id/237/536/354.jpg">
<div class="hoverText">
<div class="caption">
<i style="font-size:150px" class="fa fa-paw" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、まず犬の写真がそのまま表示されます。

CSSだけで実装！ホバー時に画像へアイコンをオーバーレイ表示する方法

画像にマウスカーソルを合わせると、濃紺のオーバーレイとともに大きな足跡アイコンがフェードインで現れます。

CSSだけで実装！ホバー時に画像へアイコンをオーバーレイ表示する方法

  1. CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

    CSSだけでスムーズなスクロール（スムーススクロール）を実現したい場合、scroll-behaviorプロパティを使用します。このプロパティにsmoothを指定すると、ページ内リンクをクリックした際に、瞬時にジャンプするのではなく、滑らかにアニメーションしながら目的のセクションへ移動できるようになります。実装方法基本的には、html要素に対して以下の1行を追加するだけです。html { scroll-behavior: smooth; }サンプルコード実際に動作する完全なコード例は以下の通りです。<!DOCTYPE html> <html> <head>

  2. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=