[CSS] 製作滑鼠移過去後圖片放大效果

要做 CSS hover 過去後圖片可以放大的功能，一般我們會先做一個固定的區塊，再把圖片透過 object-fit 的方法放進去並讓其與區塊一樣大。

<div class="box">
  <img class="cover-fit" src="https://i.imgur.com/9GJjoxF.jpg" alt="">
</div>

CSS 的部分：

.box{
  width: 100px;
  height: 100px;
  background: #aaa;
}
.cover-fit{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

接著透過 hover 去感應區塊後修改圖片大小，並加上 transition 設定變形的轉場。

.box{
  width: 100px;
  height: 100px;
  background: #aaa;
  overflow: hidden;
}
img{
  transition: .5s;
}
.box:hover img{
  transform: scale(1.2);
}
.cover-fit{
  width: 100%;
  height: 100%;
  object-fit: cover;
}