要做 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;
}
![[CSS] 使用 scroll-behavior 達成免用 js 的平滑滾動效果](/assets/upload/1580227388021_0.jpg)
