CSSでマウスオーバー時の画像の見せ方色々・アニメーションでアクセント

公開日：2013/12/13 最終更新日：2022/08/27

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える
ユーザーの環境としてスマホが当たり前になってきた今日ですが、まだまだPCでの利用も忘れてはいけません。画像の上をマウスカーソルが移動した時に何かしたいってことはありますよね。何か目立たせたいとかアクションを付けて画像を切り替えたいとか用途は様々ではないでしょうか。

以前の記事

ネットショップ運営の気になる備忘録

CSS マウスオーバー画像切り替え

マウスオーバー時に画像を切り替えるという見せ方について紹介しました。よく見かける方法でアクセントとしても良いですよね。本日は、マウスオーバー時の画像の見せ方について他にも色々あるのでまとめてみました。javascript、jQueryなどを使った方法も含めると膨大な数になるので、今回はCSSのみを使った方法です。それでも組み合わせ次第で色々な表現が可能ですので、ぜひ参考にしてみてください。

CSSだけでマウスオーバー時の画像の見せ方色々とコピペでどうぞ

jQueryなどのscriptは使わずにCSSのみでのシンプルな方法をまとめてみましたので、さくっとコピペでも活用できるかと思います。また、それぞれを組み合わせることもできるので工夫次第ではいろいろな表現が可能になっていますので、ぜひ活用してみてください。CSSのみでも、いろいろなことが表現できるようになっています。

sample.html

1	`<a` `href="リンク先URL"> <img` `src="画像URL"` `alt=""` `/> </a>`

↑↑のような画像にリンクを貼っている状態のタグをベースにサンプルを見ていきたいと思います。
ショップ内に配置している商品画像やバナーと考えたらイメージしやすいでしょう。

透過させる・半透明にする

a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

枠線をつける

a:hover img {
border:2px #FF9900 solid;
}

サイズを変える

a:hover img {
width:150px;
height:150px;
}

位置をずらす

a:hover img {
position:relative;
top:10px;
left:10px;
}

傾ける

a:hover img {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
}

IE未対応
数値を増やせば角度が変わっていきます。逆の角度にしたい場合は、マイナスの値を設定します。

角丸にする

a:hover img {
border-radius: 10px;
}

IEには未対応
数値を増やすほど丸くなります。

円・楕円にする

a:hover img {
border-radius: 50%;
}

IE未対応
元画像のサイズが正方形なら円になりますが、長方形の場合は楕円になります。

今までのサンプルは、それぞれ個別に設定していますが同時に設定することも可能です。

枠線をつけて、透過させて、角丸にする

a:hover img {
border:2px #FF9900 solid;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
border-radius: 10px;
}

アニメーションさせながら切り替える

上記の内容でも切り替えは可能ですが、さらにCSSだけでアニメーションさせながら切り替えることも可能です。
「transition」というプロパティを追加します。

【記述】
transition: プロパティ名　時間　アニメーション変化 ;
「all」とすれば「hover」で設定したすべてのプロパティがアニメーションされます。
時間は何秒でアニメーションさせるかを指定
秒なら「○s」、ミリ秒なら「○ms」となります。例）2秒なら 2s

【アニメーション変化】
ease(開始と終了が滑らか)、ease-in(ゆっくり始まる)、ease-out(ゆっくり終わる)、ease-in-out(ゆっくり始まってゆっくり終わる)、linear(一定)

など指定することで動きの経過速度に変化がつけれます。

また、実際に記述する際には「transition」の前に各ブラウザに対応するための接頭辞を入れる必要があります。

記述例

a img{
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
border-radius: 50%;
}