ズーム

目次

• オノマトペ
• ソースコード
• 使い方

オノマトペ

オンマウスしてみよう

ソースコード例

あくまでも一例なので参考程度に使ってください。

ズームHTML1

<div class="sample">
<img src="/wp-content/themes/onmtp/imgs/zoom.png" width="" height="" alt="">
</div>

ズームHTML2

.sample {
	margin: 0 auto 60px;
	border:1px solid #CCC;
	width:150px;
	height:150px;
	overflow:hidden;
	position:relative;
}
.sample img {
	padding:10px;
	width:130px;
	height:auto;
	transform-origin: 60% 20%;
}
.sample:hover img {
	transform:scale(2);
}

使い方

• 写真にオンマウスしたら「ズーム」って大きくできないかな？
• なんとなくサムネイルだと小さいけど「ズーム」したらみやすいよね