個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印象を与えますよね。
今回は、そんな画像のアニメーションエフェクトを、CSSを知らなくてもコピペだけで簡単に実装出来てしまうライブラリのご紹介です。
CSSのファイルサイズはわずか19KB。
利用しない手はありません。

画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

imagehover.cssは、画像のホバーエフェクトを簡単にアニメーションさせられるCSSライブラリです。
CSSだけで動き、クラス名を指定するだけで実装可能なので、CSSの知識がなくても、大丈夫。
コピペだけで、クールなアニメーションエフェクトを利用できるスグレモノです。
無料版と有料版がありますが、無料版は44種類のエフェクトがあり、有料版ではなんと216種類ものエフェクトを利用できます。
コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css
Demo

imagehover.cssの使い方

使い方も至って簡単です。
Imagehover.cssのサイトから、imagehover.cssファイルをダウンロードして、利用したいサイトに読み込み、アニメーション専用のクラス名を指定するという流れです。

外部スタイルシートを読み込む

head内にimagehover.cssを読み込みます。

HTML部分を準備しクラス名を指定する

HTMLではfigure要素を利用して、figure要素にアニメーション専用のクラス名を記述します。
たとえば、スライドアップするアニメーションなら、imghvr-slide-upというクラス名を記述します。
そして、img要素で画像を配置し、figcaptionでホバーしたときに表示させたいコンテンツを記述します。

基本はこれだけです。
これだけでクールなアニメーションのホバーエフェクトを実装できるのですから、すばらしい。

リンクさせたいとき

リンクを付けたいときは、figcaption要素の下にa要素を加えるだけです。

背景カラーを変更する

デフォルトでは、背景カラーはブルーになっていますが、CSSで一度に変更可能です。
そのとときは、以下のように指定します。

個別に背景カラーを変更したいときには、figure要素部分にsytle属性を記述することで、背景カラーを変更できます。

これは手軽で便利です!

Imagehover.css

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 12

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」

ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」

CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co

記事を読む

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11

CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて

記事を読む