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でテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  2. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  3. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  4. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  5. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  6. Animated Transition Effects

最近の記事

  1. SF-G64T
  2. USB Type-C搭載ドッキングステーション
  3. RX100M6

Facebookページ

PAGE TOP