CSS・HTML Factory

少しでもお役に立てれば。

[PR]

HOME>ホバーエフェクト1>ホバーエフェクト2>ホバーエフェクト3>ホバーエフェクト4

CSSを使って作成するエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。

マウスホバー(上に乗せる)で画像が動く3

マウスオンでセピア色からカラーに

こちらもfilterを使用したタイプのもので、画像をセピア調に変換したものです。 実装にはCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)で呆けと白黒

上記で紹介したfilterですが、複数の効果を組み合わせて使うこともできます。 こちらは「マウスホバー(上に乗せる)で呆ける」と「マウスホバー(上に乗せる)で白黒」を組み合わせてみたもので、実装にはCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)で透過する

画像にマウスホバー(上に乗せる)すると透過します。 実装にはCSSを以下のように記述します。

HTML
CSS

マウスホバー(上に乗せる)で色付き透過する

画像にマウスホバー(上に乗せる)すると色付き透過します。 実装にはCSSを以下のように記述します。

HTML
CSS