CSSでの画像ホバー効果ライブラリのご紹介

CSSでの画像ホバー効果ライブラリのご紹介

  • 2018-06-10  最終更新日:2018-06-10

今回は純粋なCSS画像ホバー効果ライブラリをご紹介します。画像をマウスオーバーするとテキストが表示されるCSSライブラリになります。実装も簡単でクラス指定をすることで40種類以上の効果を体験できます。以下のアドレスから確認できます。


使い方

1.ドキュメントのhead内にスタイルシートを含めます。

<head>
  <link rel="stylesheet" href="css/imagehover.min.css">
</head>

2.次のマークアップをHTMLドキュメントに配置します。

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
        // Hover Content
    </figcaption>
</figure>

3.画像のURLを編集し、ホバーコンテンツを追加します。次に、選択したimagehover.cssクラスを含むfigure要素に設定します。上の例では、これはimghvr-fadeに設定されています。ホバー効果とそのクラスの完全なリストは、こちらにあります。

リンクの追加

画像をリンクするには、マークアップのfigcaption要素の直後に空のaタグを追加します。イメージをリンクするURLにhref属性を設定します。

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
        // Hover Content
    </figcaption>
    <a href="#"></a>
</figure>

背景色

すべての背景色は、figure要素を含むから継承されます。Figureの要素に追加されたいくつかのインラインCSSを使用して、背景色を変更することができます。

<figure class="imghvr-fade" style="background-color:#D14233;">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
</figure>

これは、CSSファイルを介して適用することもできます。次の例は、imagehover.cssクラスが適用されたすべての要素に適用されます。

[class^='imghvr-'],
[class*=' imghvr-'] {
  background-color: #D14233;
}

⇒デモはこちら

参考になれば幸いです。


∞Tadashi Suyama∞

image hover css
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

image hover css
フッターイメージ