クラスを追加するだけで画像にマウスホバーした際にアニメーションしてテキストを表示することができる「Imagehover.css」

クラスを追加するだけで画像にマウスホバーした際にアニメーションしてテキストを表示することができる「Imagehover.css」

クラスを追加するだけで画像にマウスホバーした際にアニメーションしてテキストを表示することができる「Imagehover.css」

Imagehover.cssは、クラスを追加するだけで要素にアニメーションを加えることができるCSSのライブラリです。画像にマウスホバーした際にアニメーションさせてテキストを表示することができます。

アニメーションの動きについては、Imagehover.cssの公式サイトにてご確認ください。

本記事では、Imagehover.cssの使い方について解説したいと思います。

ステップ1. Imagehover.cssのダウンロードと設置

公式サイトからImagehover.cssのをダウンロードします。右上の[Download]ボタンをクリックするとファイル一式がダウンロードされます。

Imagehover.cssのダウンロード

ファイルはGitHubでも公開されています。

ダウンロードしたら、imagehover.min.cssをサーバーにアップロードします。

ステップ2. Imagehover.cssのロード

サーバーにファイルを設置できたら、Imagehover.cssをロードします。<head>~</head>内に以下を追記します。

<head>
 <link rel="stylesheet" href="css/imagehover.min.css">
</head>

ファイルパスは適宜変更してください。

ステップ3. HTMLのマークアップ

画像とテキストは、以下のようにマークアップします。

<figure class="imghvr-fade">
 <img src="#">
 <figcaption>
 // Hover Content
 </figcaption>
</figure>

このようにfigure要素で内包し、クラスを付与してあげます。

リンクを追加する

リンクを追加したい場合は、以下のようにします。

<figure class="imghvr-fade">
 <img src="#">
 <figcaption>
 // Hover Content
 </figcaption>
 <a href="#"></a>
</figure>

背景色を変える

背景色を変えることもできます。

<figure class="imghvr-fade" style="background-color:#D14233;">
 <img src="#">
 <figcaption>
 // Hover Content
 </figcaption>
</figure>

単純にstyle属性を加えるだけですね。

背景色は、CSS側で変更することも可能です。


[class^='imghvr-'],
[class*='imghvr-'] {
 background-color: #D14233;
}

複数の要素を一括して変更する場合はCSSの方が楽ですね。

あとがき

キャプションや記事の抜粋などをアニメーションで表示させると、思わずマウスホバーさせたくなりますね。

CSSをロードしてクラスを追加するだけなので、簡単にアニメーションを実装できます。サイト内に動きを加えたいとお考えの方は、導入を検討してみてはいかがでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です