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

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

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

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

タグクラウド

image hover css
フッターイメージ