Как реализовать увеличение картинок?

* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  width: 350px; 
  height: 350px; 
  margin-left: 100px; 
  margin-top: 100px; 
  position: relative; 
} 
 
.inner_wrapper { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0; 
  top: 0; 
} 
 
.inner_wrapper .img { 
  position: absolute; 
  border-radius: 100%; 
} 
 
.img1 { 
  position: relative; 
} 
 
.img2 { 
  left: 30px; 
  top: -50px; 
} 
 
.img3 { 
  right: -50px; 
  top: -50px; 
} 
 
.img4 { 
  left: -50px; 
  bottom: 50px; 
} 
 
.img5 { 
  right: -50px; 
  bottom: -50px; 
} 
 
.img { 
  transition: .3s; 
  z-index: 3; 
} 
 
.img:hover { 
  transform: scale(1.2); 
} 
 
.img1:hover+.inner_wrapper .img { 
  transform: scale(1.2); 
}

<div class="wrapper"> 
  <img src="http://via.placeholder.com/350x350" alt="" class="img img1"> 
  <div class="inner_wrapper"> 
    <img src="http://via.placeholder.com/100x100/ff0000" alt="" class="img img2"> 
    <img src="http://via.placeholder.com/100x100/00ff00" alt="" class="img img3"> 
    <img src="http://via.placeholder.com/100x100/0000ff" alt="" class="img img4"> 
    <img src="http://via.placeholder.com/100x100/ff00ff" alt="" class="img img5"> 
  </div> 
</div>

.container { 
  width: 960px; 
  margin: 0 auto; 
} 
 
.container-img { 
  position: relative; 
  width: 500px; 
  margin: 0 auto; 
} 
 
.img-block { 
  width: 380px; 
  height: 380px; 
  margin: 0 auto; 
  -webkit-transform: scale(1); 
  transform: scale(1); 
  opacity: 1; 
  overflow: hidden; 
} 
 
#zona { 
  position: absolute; 
  width: 245px; 
  height: 165px; 
  left: 70px; 
  top: 110px; 
  z-index: 2; 
} 
 
.one { 
  position: absolute; 
  width: 380px; 
  height: 380px; 
  z-index: 1; 
} 
 
.six { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  top: 116px; 
  z-index: 3; 
} 
 
.seven { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  z-index: 3; 
  bottom: 20px; 
} 
 
.eight { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  bottom: 8px; 
  left: 140px; 
  z-index: 3; 
} 
 
.nine { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  bottom: 110px; 
  right: -25px; 
  z-index: 3; 
} 
 
.ten { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  top: 3px; 
  right: -15px; 
  z-index: 3; 
} 
 
.eleven { 
  position: absolute; 
  width: 150px; 
  height: 150px; 
  top: 5px; 
  left: 85px; 
  z-index: 3; 
} 
 
 
/*---------- HOVER ----------*/ 
 
.img-block .one { 
  display: block; 
  margin: 0 auto; 
  width: 100%; 
  height: 100%; 
  -webkit-transform: scale(1); 
  transform: scale(1); 
  -webkit-transition: all 2.3s 0.5s; 
  transition: all 2.3s 0.5s; 
  overflow: hidden; 
} 
 
.img-block .img-mov { 
  -webkit-transform: scale(1); 
  transform: scale(1); 
  opacity: 1; 
  -webkit-transition: all 2.3s 0.5s; 
  transition: all 2.3s 0.5s; 
  overflow: hidden; 
} 
 
#zona:hover~.big { 
  -webkit-transform: scale(1.15); 
  transform: scale(1.15); 
  overflow: hidden; 
} 
 
.img-block .img-mov:hover { 
  -webkit-transform: scale(1.15); 
  transform: scale(1.15); 
  overflow: hidden; 
}

<div class="container"> 
  <div class="container-img"> 
    <div class="img-block"> 
      <div id="zona"></div> 
 
      <img class="one big" src="img/1.png"> 
 
      <img class=" six img-mov big" src="img/6.png"> 
 
      <img class="seven img-mov big" src="img/7.png"> 
 
      <img class="eight img-mov big" src="img/8.png"> 
 
      <img class="nine img-mov big" src="img/9.png"> 
 
      <img class="ten img-mov big" src="img/91.png"> 
 
      <img class="eleven img-mov big" src="img/92.png"> 
 
 
    </div> 
 
  </div> 
 
 
</div>