使用css製作滑鼠移入圖片的放大效果

2022/8/17

當滑鼠移到圖片上會有放大的效果,這在網頁設計上是很常見的,而這效果用CSS就可以做出來了唷!

transform可以設定圖片放大的倍率,

transition可以做出圖片緩慢放大的效果,

而滑鼠移入所產生的變化要用:hover來實現。 

外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分,

transform: scale(1.1)為圖片放大的倍率

transition:all 0.5s ease 0s為圖片放大所需的時間和特效

範例: