画像hoverアニメーション例のまとめ
公開：2025.09.15 更新：2025.09.18
今回は、カーソルを画像に合わせたときのアニメーション例をご紹介します。
画像にaタグでリンクを設定することがあります。たとえばバナーとか。
ページ内のリンク画像にマウスカーソルを合わせたときに、何かしら画像に変化があった方がリンク画像だとわかりやすいです。
では、実際に見てみましょう。
※PCだとマウスカーソルを合わせたときの動きがわかりやすいです。ですが、スマホだとタップしてページが切り替わるまでの間しか見られないので微妙かもしれません。
今回の基本のコードはこちら。このHTMLとCSSをベースにしています。
<div class="common-img-animation common-〇〇-animation"><!-- 〇〇部分はアニメーションごとに変更しています -->
<a href="画像URLが入ります">
<img src="画像URLが入ります" alt="テスト画像" width="1200" height="750">
</a>
</div>.common-img-animation a img {
transition: 0.6s; /*アニメーションの動きを滑らかにする*/
max-width: 100%;
height: auto;
}opacityを使用した例
まずは、cssの「opacity」を使用した例です。「opacity」を使用すると、透明度が変更できます。
「opacity: 0.5」で50%透過になります。0で完全に透明、1だと不透明です。
cssのfilterにもopacityを変える機能があります。ですが、私の場合はこちらしか使わないのでfilterの方は割愛します。
.common-img-animation.common-transform-opacity-animation a:hover img {
opacity: 0.5; /*透明度の指定*/
}transformを使用した例
次に、cssの「transform」を使用した例です。「transform」を使用すると、ズームや回転などの動きを付けることができます。
個人的によく使うのはズームですね。他はそう使うことはありませんが、参考に置いておきます。
ちなみに、全ての画像に対して「transition: .6s;」を設定しています。その方がアニメーションが滑らかに動くのでオススメです。
ズームアニメーション「scale」
画像のhoverアニメーションで一番よく使うやつです。このWEBサイトの投稿一覧とかでも使っています。
ズームの倍率は、「scale(1.2)」の数値で変更しています。
.common-img-animation.common-transform-scale-animation {
overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-scale-animation a:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2); /*ズームの指定*/
}画像のはみ出し防止のために、「overflow: hidden」を指定しています。
この指定がないと、画像が他の要素に被ったりしますのでご注意ください。
「他の要素と被ったりとか気にしないぜ！」とか、「画像のが大きくなるのを、そのまま見せたい。」という方は外しておいてください。
★ポイント
「overflow: hidden」を指定している場合、要素内の画像サイズが「overflow: hidden」を指定している要素よりも小さいと、枠内に空白の部分が出てきてしまいます。
要素内の画像サイズは、「overflow: hidden」を指定している要素よりも大きい物を使用することをオススメします。
回転アニメーション「rotate」
作ってみたけど、1回転はさすがにやりすぎだと思いました。
マウスカーソルを合わせた位置によっては、画像がバグみたいな動きをしてとても愉快ですね。
画像を動かす角度を変更する場合は、「360deg」部分の数値を変更してください。
.common-img-animation.common-transform-rotate-animation {
overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-rotate-animation a:hover img {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); /*回転の指定*/
}ズーム＋回転アニメーション「scale」＋「rotate」
先ほどのズームと回転を合わせたアニメーションです。圧が強め。
「scale(1.4)」「rotate(15deg)」と、「overflow: hidden」を指定した要素内に余白ができないように数値を調整しました。
.common-img-animation.common-transform-scale-rotate-animation {
overflow: hidden; /*はみ出し防止*/
}
.common-img-animation.common-transform-scale-rotate-animation a:hover img {
-webkit-transform: scale(1.4) rotate(15deg);
transform: scale(1.4) rotate(15deg); /*ズームと回転の指定*/
}縦軸と横軸回転アニメーション「scaleX」「rotateY」
回転の軸を変更したバージョンです。縦軸（Y）と横軸（X）でそれぞれ回転します。
縦横どっちがYでどっちがXだっけ？と思ったら、学生時代の数学でやってたグラフを思い出すことにしています。縦がYで横がXだな。
こちらもカーソルを合わせる位置によってはバグみたいな動きになりますね。
まずは縦軸です。
.common-img-animation.common-transform-rotateY-animation a:hover img {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg); /*Y軸回転の指定*/
}次に横軸です。
.common-img-animation.common-transform-rotateX-animation a:hover img {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg); /*X軸回転の指定*/
}filterを使用した例
最後に、CSSの「filter」を使用した例です。「filter」を使用すると、画像の色を変更できたりします。
モノクロの画像だと変化がわからないところがあるので、画像を変更しました。
急に手の画像が出てきますが、気にしないでください。ちょうどいいカラー画像がなかったので、手を描く練習をしたときの絵を引っ張り出してきました。
普段は「grayscale」と「drop-shadow」や「blur」くらいしか使いません。ですが、せっかくなのでfilterでできることは一通りまとめてみました。
グレースケールに変化するアニメーション「grayscale」
画像をモノクロに変更します。
「grayscale(100%)」だと、完全にグレーなります。50%とかにすると、色を少し残して半分だけグレーに変化してくれます。
.common-img-animation.common-filter-grayscale-animation a:hover img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /*グレースケールの指定*/
}影をつける「drop-shadow」
画像に影をつけるhoverアニメーションです。
「drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5))」で影をつける位置・範囲と色を指定しています。
最初の「5px」が横軸の位置です。右に5px分、影が移動します。
2つ目の「5px」が縦軸の位置です。下に5px分、影が移動します。
3つ目の「5px」が影の範囲です。画像の周囲5pxに影が広がります。
「rgba(0, 0, 0, 0.5)」で色を指定しています。「r=red」「g=green」「b=blue」の順で、数値を最小0から最大255の数値で入力します。
「0.5」は色の濃さです。0.5で50%の指定になります。
.common-img-animation.common-filter-drop-shadow-animation a:hover img {
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5)); /*影の指定*/
-webkit-transform: translateZ(0);
transform: translateZ(0);
}★ポイント
transform: translateZ(0)の指定について
iOSのSafariで影を付けた要素を確認すると、正しく表示されないことがありました。Safariだと表示が違う…とかよくあるんですよね。
その問題を解消するために指定しました。
なくても問題なく表示されるようであれば、この指定は不要です。
セピアにする「sepia」
グレースケールのセピア版です。
「sepia(100%)」だと、完全にセピアなります。50%とかにすると、色を少し残して半分だけセピアに変化してくれます。
.common-img-animation.common-filter-sepia-animation a:hover img {
-webkit-filter: sepia(100%);
filter: sepia(100%); /*セピアの指定*/
}ぼかすアニメーション「blur」
画像をぼかすhoverアニメーションです。%指定だと動かなかったため、px指定しました。
これの難点としては、画像のフチも一緒にぼけるところですね。フチというか…まぁ、画像全体をぼけさせるので仕方ないっちゃ仕方ないんですけど。
画像のフチははっきりさせたままでぼけさせたいときには向いていません。
.common-img-animation.common-filter-blur-animation a:hover img {
-webkit-filter: blur(10px);
filter: blur(10px); /*ぼかしの指定*/
}コントラストを変えるアニメーション「contrast」
コントラストを強くしたり、弱くしたりできます。
「contrast(200%)」だと2倍強くなります。100%でデフォルトの状態、50%とかにするとコントラストが弱くなります。
.common-img-animation.common-filter-contrast-animation a:hover img {
-webkit-filter: contrast(200%);
filter: contrast(200%); /*コントラストの指定*/
}明るさを変える「brightness」
画像の明るくしたり、暗くしたりできます。
「brightness(200%)」だと2倍明るくなります。100%でデフォルトの状態、50%とかにすると暗くなります。
.common-img-animation.common-filter-brightness-animation a:hover img {
-webkit-filter: brightness(200%);
filter: brightness(200%); /*明るさの指定*/
}彩度を変更する「saturate」
画像の彩度を変更します。
「saturate(200%)」で鮮やかさが2倍になります。逆に50%とかを指定すると、色がくすみます。
.common-img-animation.common-filter-saturate-animation a:hover img {
-webkit-filter: saturate(200%);
filter: saturate(200%); /*彩度の指定*/
}色相を回転させる「hue-rotate」
色相を回転させるアニメーションです。
回転ってなんぞや？って感じでしたが、色相環を見たらイメージしやすかったです。
画像の色が赤のときに「rotate(180deg)」を指定すると、色相環の反対にある緑に変化します。
今回の画像だとガミラス人の手っぽくなりました。
.common-img-animation.common-filter-hue-rotate-animation a:hover img {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg); /*色相の回転の指定*/
}色の階調を反転させる「invert」
色の階調を反転させます。
明るさと色相を反転させる感じですかね。黒は白に、赤は緑に変更するようなイメージです。
通常時は「0%」です。「invert(100%)」で完全に反転します。
.common-img-animation.common-filter-invert-animation a:hover img {
-webkit-filter: invert(100%);
filter: invert(100%); /*階調の反転の指定*/
}終わりです！
以上、画像hoverアニメーションのまとめでした。
hoverアニメーションがあった方が、リンク画像に目が留まる率があがるんじゃないかな～と個人的には思っています。（ソースはない）
参考になりましたら幸いです。
