マウスオーバーで画像を拡大縮小する方法

拡大

HTML

<div class="expand">
 <img src="image/image.jpg">
</div>

CSS

.expand {
	width: 300px;
	height: 200px;
	overflow: hidden;
	border: 1px solid #000;
	}
	
.expand img{
	width: 300px;
	height: 200px;
	transition: transform 2s linear;
	}
	
.expand img:hover{
	transform: scale(2.5);
	}

縮小

HTML

<div class="expand">
 <img src="image/image.jpg">
</div>

CSS

.shrink {
	width: 300px;
	height: 200px;
	overflow: hidden;
	border: 1px solid #000;
	}
	
.shrink img{
	width: 300px;
	height: 200px;
	transition: transform 2s linear;
	}
	
.shrink img:hover{
	transform: scale(0.6);
	}

　

---