ココカラハジメヨウ ウェブ、投資、美容、インビザライン

ウェブデザイン

2021.12.02CSS

マウスオーバーで画像をズームするcss

html

<div class="zoom">
<img src="images/index-images/image01.jpg" alt="">
</div>

css

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