> CSS > CSS3でマウスオン(:hover)時に画像を拡大・縮小する方法

CSS3でマウスオン(:hover)時に画像を拡大・縮小する方法

  • 投稿日:2015/10/20 |最終更新:2015/10/23
  • CSS

最近、マウスオン(:hover)時に画像に様々なアニメーションが追加されているのをよく見かけます。
CSS3だけで実現できるhover時の効果をまとめてみました。

利用方法

HTMLサンプル

<div class="">
    <img src="./sample.png" alt="sample" />
</div>

上記のように、マウスオン時に変更したい画像をdiv要素などでくるみます。
div要素に下記に紹介する各クラスを付与して利用してください。

効果サンプルとCSS例

zoomin

マウスオンで画像を拡大する

sample_flower.jpg

画像の上にマウスオンすると、画像が拡大(ズームイン)します。

CSSサンプル

.zoomin1 img{
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.zoomin1:hover img{
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

マウスオンで画像を拡大して角度を変更する

sample_flower.jpg

画像の上にマウスオンすると、画像が拡大(ズームイン)して角度が斜めになります。

CSSサンプル

.zoomin2 img {
	-webkit-transform: rotate(10deg) scale(1);
	transform: rotate(10deg) scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoomin2:hover img {
	-webkit-transform: rotate(0) scale(1.4);
	transform: rotate(0) scale(1.4);
}

zoomout

マウスオンで画像を縮小する

sample_flower.jpg

画像の上にマウスオンすると、画像が縮小(ズームアウト)します。

CSSサンプル

.zoomout1 img {
	-webkit-transform: scale(1.4);
	transform: scale(1.5);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoomout1:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

マウスオンで画像を縮小して角度を変更する

sample_flower.jpg

画像の上にマウスオンすると、画像が縮小(ズームアウト)して角度が斜めになります。

CSSサンプル

.zoomout2 img {
	-webkit-transform: rotate(10deg) scale(1.4);
	transform: rotate(10deg) scale(1.4);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoomout2:hover img {
	-webkit-transform: rotate(0) scale(1);
	transform: scale(1);
}

opacity

マウスオンで画像を透過する

sample_flower.jpg

画像の上にマウスオンすると、画像が若干透過します。

CSSサンプル

.opacity:hover img{opacity: 0.8;}

マウスオンで画像を透過して背景を見せる

sample_flower.jpg

画像の上にマウスオンすると、画像が若干透過して背景色が見えます。

CSSサンプル

.opacity_color{background-color: #f6cd4c;}
.opacity_color:hover img{opacity: 0.8}

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)