【CSS】画像をホバーした時のパターン集(9種類)

今回は画像をホバーしたときのエフェクトを紹介します。CSSのみで実装できるので初心者の方も是非お試しください。

デモサイト

下準備

まずは下準備です。下記を元にCSSを追記していきます。あくまでデモサイトのソースなので同じにする必要はありません。

HTML

<p><a href="#"><img src="画像ファイル" alt="画像名" /></a></p>

CSS

p a{
	width:250px;
	display:block;
}
p a img{ width:250px; }

1.ホバーしたら薄くなる

プレビュー

p a:hover{ 
	opacity:0.5;
	transition:0.3s;
}

opacity:0.5;で画像の不透明度を調整します。
0.0～1.0の値で指定します。0.0は完全な透明、1.0は完全な不透明です。今回は0.5なので半透明になります。

transition:0.3s;でホバーして変化するときの所要時間を指定します。
今回は0.3sなので、ホバーしたら0.3秒かけて画像が薄くなります。

2.ホバーしたら暗くなる

プレビュー

p a{ background:#111; }
p a img:hover{
	opacity:0.5;
	transition:0.3s;
}

1.ホバーしたら薄くなるの応用で、背景に暗い色を入れることで画像が暗くなったように見せることができます。

3.ホバーしたら色が重なる

プレビュー

p a{ background:#203aad; }
p a img:hover{
	opacity:0.5;
	transition:0.3s;
}

2.ホバーしたら暗くなるの応用で、background:#203aad;以外は同じです。今回は青色を指定しましたが、background:#203aad;のカラーコードは好きな色を指定してください。また、色を濃くしたい場合はopacity:0.5;の値を上げたり、逆に薄くしたい場合は値を下げたりして調整してください。

4.ホバーしたらモノクロからカラーになる

プレビュー

p a img{ filter:grayscale(100%); }
p a img:hover{
	filter:grayscale(0);
	transition:0.3s;
}

filter:grayscale(100%);を指定するだけでモノクロになります。あとは、ホバーした時に100%を0にすることでカラーの画像に戻ります。

5.ホバーしたらズームインする

プレビュー

p a{ overflow:hidden; }
p a img:hover{
	transform:scale(1.3);
	transition:0.3s;
}

まず、overflow:hidden;で拡大したときにはみ出た画像を表示させないようにしておきます。あとはtransform:scale(1.3);でホバーした時にどれくらい拡大するのか指定します。scale(1)は1倍なのでそのままのサイズ、scale(2)は2倍のサイズになります。今回はscale(1.3)なので1.3倍の大きさに拡大されます。

6.ホバーしたらズームアウトする

プレビュー

p a{ overflow:hidden; }
p a img{ transform:scale(1.3); }
p a img:hover{
	transform:scale(1);
	transition:0.3s;
}

5.ホバーしたらズームインするでホバーの部分に指定してたtransform:scale(1.3);をホバーする前のimgに指定します。あとは、ホバーしたときにscale(1.3)より小さい数値を指定すれば縮小されます。

7.ホバーしたら上に動く

プレビュー

p a img{
	position:relative;
	top:0;
}
p a img:hover{
	top:-10px;
	transition:0.3s;
}

まず、画像の位置を決めてあげてからホバーしたあとの最終的な位置を指定します。top:-10px;の値が小さいほど上に移動します。

8.ホバーしたら下に動く

プレビュー

p a img{
	position:relative;
	top:0;
}
p a img:hover{
	top:10px;
	transition:0.3s;
}

7.ホバーしたら上に動くとほぼ同じです。上に動くのとは逆でtop:10px;の値が大きいほど下に移動します。

9.ホバーしたら枠線の色が変わる

プレビュー

p a img{
	border:solid 2px #ccc;
}
p a img:hover{
	border:solid 2px #203aad;
}

まず、画像に枠線をつけておきます。目立たないような色（グレーなど）がおすすめです。あとはホバーした時に枠線の色を変えるだけです。

関連記事