【CSS】マウスオーバーで画像を加工させる方法

マウスオーバー用に一つ一つ画像を作成することなく
CSSだけで画像にちょっぴりおしゃれな効果を出す方法を紹介します。

画像を半透明にする

<a href="#" class="opacity">
	<img src="./213179_m_wi/97f616fa409b2086924c04ec00dbcf17_m.jpg" />
</a>

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

マウスオーバーすると半透明に変化します。

画像の外側をふわっと変化させる

<a href="#" class="opacity">
	<img src="./213179_m_wi/97f616fa409b2086924c04ec00dbcf17_m.jpg" />
</a>

.opacity:hover {
	display: inline-block;
	position: relative;
}
.opacity:hover:after {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	width: 100%;
	height: 100%;
	box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.7),
	inset 0 0 100px rgba(255, 255, 255, 0.3);
}

box-shadow を使っています。rgbaで外側の色を変えることができます。

画像を回転させて傾かせる

<a href="#" class="opacity">
	<img src="./213179_m_wi/97f616fa409b2086924c04ec00dbcf17_m.jpg" />
</a>

.opacity:hover {
	display: inline-block;
	transform: rotate(-5deg);
}

画像を拡大させる

<a href="#" class="opacity">
	<img src="./213179_m_wi/97f616fa409b2086924c04ec00dbcf17_m.jpg" />
</a>

.opacity img:hover {
	display: inline-block;
	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04); 
}

ちょっとした変化ですがあるだけで印象が変わりますね。