オンマウスで画像を拡大

/* 課題：複数のクラスをCSSで同時に記述で指定できていないため、全クラス繰り返している*/

.pic1 {
      overflow: hidden;	/*拡大時にdiv範囲よりはみ出た部分を隠す*/
      /*width: 50%;	/*画像の幅*/
      /*height: 50%;	/*画像の高さ*/
    }
    /*.container3 img {
      display: block;
      transition-duration: 0.3s;	/*変化に掛かる時間
    }*/
    .pic1 img:hover {
      transform: scale(1.1);	/*画像の拡大率*/
      transition-duration: 0.3s;	/*変化に掛かる時間*/
    }
    .pic3 {
      overflow: hidden;	/*拡大時に上位のdiv範囲よりはみ出た部分を隠す*/
     }
    .pic3 img:hover {
      transform: scale(1.1);	/*画像の拡大率*/
      transition-duration: 0.3s;	/*変化に掛かる時間*/
    }
    .pic4 {
      overflow: hidden;	/*拡大時に上位のdiv範囲よりはみ出た部分を隠す*/
     }
    .pic4 img:hover {
      transform: scale(1.07);	/*画像の拡大率*/
      transition-duration: 0.3s;	/*変化に掛かる時間*/
    }

最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α | KuzLog