CSS

CSSを使って画像にホバーするとキャプションを表示させるエフェクト

CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像にホバーするとキャプションを表示させることができます。実際に使ってみましたが、キャプションに切り替わるエフェクトも自然な感じでとてもいいなって思いました。色々な場所で使えそうです。

[ads_center]

ホバーエフェクト

こんな感じで画像にマウスを乗せると、キャプションが表示されます。

ホバーでキャプションを表示

キャプションで表示されるテキストはspanで記述してあります。HTMLは以下のように記述しています。

<div id="mainwrapper">
    <div class="box">
        <img src="img1.jpg">
        <span class="caption fade-caption">
            <h3>サンプルテキストサンプルテキスト</h3>
        </span>
    </div>
</div>

CSSコードは以下のサイトで確認することができます。

Awesome Image Hover Effect Using Pure CSS

関連記事

  1. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  2. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  3. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  4. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  5. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  6. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP