pexels-photo-244132

CSSだけで簡単にhoverをアニメーションさせる「imagehover.css」

こんにちは、フロントエンジニアのTAKAです。

そろそろクリスマスの季節が近づいてきましたが、皆さんはいかがお過ごしでしょうか。

今回はJavaScriptいらずに簡単にCSSでhoverアニメーションを付与出来る「imagehover.css」をご紹介致します!

imagehover.css

img_imagehover

http://www.imagehover.io/

メリット

  • ライセンスがMITなので、多岐にわたって使える
  • JavaScriptを介さないのでカスタマイズしやすい
  • アニメーションの種類が豊富
  • 中の画像等は自由に差し替えることが可能

デメリット

  • CSS3で再現しているため、レガシーブラウザには対応していない

使い方

imageshover.cssを読み込む

See the Pen imagehover.css[Loading] by Professa (@Professa) on CodePen.

figure要素を使い、クラス名を入力する

以下のコードを入力します。

See the Pen imageshover.css[TEST] by Professa (@Professa) on CodePen.

 すると以下の用に表示されます。

See the Pen imageshover.css[TEST] by Professa (@Professa) on CodePen.

色を変える

色を変える際にはfigure要素の背景を変更すれば色を変える事が出来ます。

See the Pen imageshover.css[colorTEST] by Professa (@Professa) on CodePen.

アニメーションを変更する

アニメーションを変更する場合、figure要素のクラスを変更する。

普通のフェードインアウト

See the Pen imageshover.css[TEST] by Professa (@Professa) on CodePen.

その他バリエーション

See the Pen imageshover.css[animeTEST] by Professa (@Professa) on CodePen.


その他アニメーションの種類はデモサイト内の”The Classes”を参照してください。

他のプラグインよりも手軽で、扱いやすい

いかがでしたでしょうか?「JavaScriptはちょっと苦手だなぁ」という方でも、JavaScriptを介さないimagehover.cssなら簡単にアニメーションホバーが実装出来ます。

またCSSで制御しているので、カスタマイズがしやすいのもよいですね。

CONTACT US

株式会社プロフェッサはWEB制作会社です。
ウェブサイト制作やシステム開発など、ウェブに関するご相談は下記よりお気軽にどうぞ


Previous Post

Next Post