CSS放大圖片會爆框

初步想法

想要實作一個滑鼠放上去時會放大圖片簡單的效果
使用到的技巧

1. :hover Selectors(選擇器)
   用來選擇滑鼠指標經過在上面時的元素
2. transform: scale()
   transform 屬性裡，用來縮放元素大小

這兩個加起來就可以做出上述的效果
不過被選擇到放大後的圖片會爆出框框
這時候就需要加上
overflow: hidden
當超出邊界範圍時，將多餘的部分隱藏起來不顯示

問題

原本以為到這邊就可以成功將效果呈現
但是卻發現會因為 padding 的間距
讓圖片放大的範圍有了”亂長大的空間”

解決

後來在圖片外面多包一個 div
並將 overflow: hidden 寫在裡面
文字與圖片間的 padding 就不會給圖片亂長大的空間了

.col-grid {
  max-width: 450px;
  overflow: hidden;
  img {
    max-width: 450px;
    &:hover {
      transform: scale(1.1);
      transition: 0.5s;
    }
  }
}

結果

左邊為目標效果，右邊是有非預期爆框的效果