HOME>ホバーエフェクト１>ホバーエフェクト２>ホバーエフェクト３>ホバーエフェクト４
ＣＳＳを使って作成するエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。
マウスホバー（上に乗せる）で画像が動く２
マウスで横移動
予めmarginを使って画像の位置を少しずらして配置しておき、ホバー時にそのmarginを消すことでスライド画像がスライドされるようなエフェクトを付けたものです。 実装にはCSSを以下のように記述します。 ※使用する画像の横幅が「表示させたい領域＋スライドさせたい距離」よりも大きいものであれば、scaleの指定は必要ありません。
ＨＴＭＬ
ＣＳＳ
マウスで回転とズームアウト
ホバー（上に乗せる）時に画像が回転するエフェクトを付けたもので、更に「マウスでズームアウト１」で紹介したホバー（上に乗せる）時に画像がズームアウトするエフェクトも加えたものです。 実装にはCSSを以下のように記述し、回転する角度はrotateを、拡大率はscaleの値をそれぞれ変更することで任意の動きに変更できます。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で画像が現れる
filterを使って画像にブラーエフェクトを付けたもので、今回のサンプルでは予めブラー効果を付けたものをホバー（上に乗せる）時に解除するというものになりますが、逆にホバー（上に乗せる）時にブラー効果を付けているのも見かけますね。 実装にはCSSを以下のように記述し、ブラー効果を調整したい場合は下記サンプルソースでblur(3px)と指定されている箇所の値を任意のものに変更してください。
ＨＴＭＬ
ＣＳＳ
マウスホバー（上に乗せる）で白黒からカラーに
同じくfilterを使用して、こちらは画像をグレースケール変換したものです。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ