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

メトロスタイルなSNSアイコンをウィジェットで実装できるWordPressプラグイン「Metro Style Social Widget」前のページ

色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」次のページDarkTooltip

関連記事

  1. CSS

    CSS3のtransformを使えば要素を全体的に拡大するやつはめっちゃ簡単にできた

    前回、「jQueryでマウスオーバーした時に要素を全体的に拡大するやつ…

  2. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  3. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  4. CSS

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

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

    CSS

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

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

  6. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP