ホーム » N-PLUS 全記事一覧 » DEMO » 【CSS】画像マウスオーバーで範囲内の中で拡大【DEMO】
【CSS】画像マウスオーバーで範囲内の中で拡大【DEMO】
CSS/DEMO
■CSS CODE
aside#img-scale {
width:30%;
height:auto;
margin:0 auto;
padding:0;
}
.scale_up {
width: 30%;
border: 0px solid #CCC;
overflow: hidden;
background:#ccc;
}
.scale_up img {
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
}
.scale_up img:hover {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
■HTML CODE
<aside id="img-scale">
<div class="scale_up">
<a href="https://n-plus.work/"><img src="https://n-plus.work/wp-content/themes/n-plus.work/img/block001-img001.jpg"></a>
</div>
</aside>