CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css
Post on:2016年3月10日
sponsors
外部CSS一つとclassを加えるだけで簡単に実装できる、画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシートを紹介します。
アニメーションは40種類以上、他のCSSやJSは不要でわずか19KBの超軽量CSSです。
imagehover.css
imagehover.css -GitHub
imagehover.cssのデモ
ホバーのアニメーションは40種類以上、デモページで楽しめます。
実装も非常に簡単シンプルなので、いくつか実装してみました。
.imghvr-push-upを加えるだけ
プッシュ アップ（リンク無し）
スライド アップ（リンク有り）
リビール アップ（リンク有り）
※スライドが完了してから、表示
ヒンジ アップ（リンク有り）
フリップ 水平（リンク有り）
シャッター 水平（リンク有り）
ホールド アップ（リンク有り）
ズーム アウト アップ（リンク有り）
ブラー（リンク有り）
imagehover.cssの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="css/imagehover.min.css"> </head> |
Step 2: HTML
figure要素にclassを与え、画像とホバー時のコンテンツを配置します。
|
1 2 3 4 5 6 |
<figure class="imghvr-fade"> <img src="#"> <figcaption> // ホバー時のコンテンツ </figcaption> </figure> |
リンクさせる時は、a要素を加えます。
|
1 2 3 4 5 6 7 |
<figure class="imghvr-fade"> <img src="#"> <figcaption> // ホバー時のコンテンツ </figcaption> <a href="#"></a> </figure> |
背景のカラーも簡単に変更できます。
|
1 2 3 4 5 6 |
<figure class="imghvr-fade" style="background-color:#D14233;"> <img src="#"> <figcaption> // ホバー時のコンテンツ </figcaption> </figure> |
複数の背景のカラーを一括で変更したい時は、CSSで設定するのが便利です。
|
1 2 3 4 |
*[class^='imghvr-'], *[class*=' imghvr-'] { background-color: #D14233; } |
sponsors
