HOME>ホバーエフェクト１>ホバーエフェクト２>ホバーエフェクト３>ホバーエフェクト４
ＣＳＳを使って作成するエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。
マウスホバー（上に乗せる）で画像が動く１
マウスでズームイン１
ホバー（上に乗せる）時に画像が拡大するエフェクトを付けたもので、実装にはCSSを以下のように記述します。 拡大率を変更したい時にはscaleの値、スピードなどを変更したい時にはtransitionの値をそれぞれ任意のものに変更してください。
ＨＴＭＬ
ＣＳＳ
マウスでズームイン２
同じくホバー（上に乗せる）時に画像が拡大するようなものですが、こちらはimgのwidthを変更することで画像サイズを変更し、先ほどとは違った感じで見せることができます。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスでズームアウト１
「マウスでズームイン１」で紹介したホバー（上に乗せる）時に画像が拡大するエフェクトの逆バージョンで、先ほどはホバー（上に乗せる）時にscaleの値を大きくしましたが、こちらは初期状態の時に値を大きくしておき、ホバー（上に乗せる）時に値を小さくすることで画像がズームアウトするエフェクトを実装したものです。 実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ
マウスでズームアウト２
こちらは「マウスでズームイン２」で紹介したホバー（上に乗せる）時に画像が拡大するエフェクトの逆バージョンで、実装にはCSSを以下のように記述します。
ＨＴＭＬ
ＣＳＳ