CSS初心者でも簡単!画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css

外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。

アニメーションは40種類以上、他のCSSやJSは不要でわずか19KBの超軽量CSSです。

サイトのキャプチャ

imagehover.css
imagehover.css -GitHub

imagehover.cssのデモ

ホバーのアニメーションは40種類以上、デモページで楽しめます。

サイトのキャプチャ

デモページ

実装も非常に簡単シンプルなので、いくつか実装してみました。

サンプル画像
ホバー時のコンテンツ
.imghvr-push-upを加えるだけ

プッシュ アップ(リンク無し)

サンプル画像
ホバー時のコンテンツ
.imghvr-slide-upを加えるだけ

スライド アップ(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-reveal-upを加えるだけ

リビール アップ(リンク有り)
※スライドが完了してから、表示

サンプル画像
ホバー時のコンテンツ
.imghvr-hinge-upを加えるだけ

ヒンジ アップ(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-flip-horizを加えるだけ

フリップ 水平(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-shutter-out-horizを加えるだけ

シャッター 水平(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-fold-upを加えるだけ

ホールド アップ(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-zoom-out-upを加えるだけ

ズーム アウト アップ(リンク有り)

サンプル画像
ホバー時のコンテンツ
.imghvr-blurを加えるだけ

ブラー(リンク有り)

imagehover.cssの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

figure要素にclassを与え、画像とホバー時のコンテンツを配置します。

リンクさせる時は、a要素を加えます。

背景のカラーも簡単に変更できます。

複数の背景のカラーを一括で変更したい時は、CSSで設定するのが便利です。

sponsors

top of page

©2024 coliss