<svg viewBox="0 0 500 500" xmlns='http://www.w3.org/2000/svg'>

  <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
    <feTurbulence baseFrequency="0.02 0.6" result="NOISE" numOctaves="2" />
    <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
  </filter>
  <!--    <rect width='100%' height='100%' filter='url(#challengeNoise)' /> -->
  <image class="image one" id="img" xlink:href="https://samrithasudhagar.github.io/assets/IMG_20201020_154608.jpg" x="-60" y="0" width="300px" height="300px" filter="url(#noise)"></image>

  <image class="image two" id="img" xlink:href="https://samrithasudhagar.github.io/assets/1626262255012__01.jpg" x="450" y="0" width="300px" height="300px" filter="url(#noise)"></image>
  <image class="image three" id="img" xlink:href="https://samrithasudhagar.github.io/assets/IMG_20200911_121501__01.jpg" x="180" y="240" width="300px" height="300px" filter="url(#noise)">
  </image>

  <image class="image five" id="img" xlink:href="https://samrithasudhagar.github.io/assets/1624176647257.jpg" x="470" y="260" width="300px" height="300px" filter="url(#noise)">
  </image>

  <image class="image six" id="img" xlink:href="https://samrithasudhagar.github.io/assets/IMG_20201031_165610.jpg" x="-300" y="-30" width="300px" height="260px" filter="url(#noise)">
  </image>

  <image class="image seven" id="img" xlink:href="https://samrithasudhagar.github.io/assets/IMG_20210615_152626.jpg" x="190" y="-30" width="300px" height="260px" filter="url(#noise)">
  </image>
  <image class="image four" id="img" xlink:href="https://samrithasudhagar.github.io/assets/1624465339754.jpg" x="-300" y="240" width="300px" height="300px" filter="url(#noise)">
  </image>
  <image class="image eight" id="img" xlink:href="https://samrithasudhagar.github.io/assets/1624093534547.jpg" x="-40" y="320" width="200px" height="260px" filter="url(#noise)">
  </image>
</svg>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: white;
}

svg {
  width: 100vw;
  height: 700px;
}
.image {
  transition: all 1s ease;
  cursor: pointer;
}
.image:hover {
  transition: all 1s ease;
  filter: none;
  z-index: 100;
}

.two:hover {
  transform: scale(1.1) translateX(-60px);
}
.three:hover {
  transform: scale(1.1) translate(-60px, -50px);
}
.four:hover {
  transform: scale(1.1) translate(40px, -70px);
}
.six:hover {
  transform: scale(1.1) translateX(30px);
}
.one:hover {
  transform: scale(1.1) translateX(-20px);
}
.five:hover {
  transform: scale(1.1) translate(-80px, -50px);
}
.seven:hover {
  transform: scale(1.1) translate(-10px, 30px);
}
.eight:hover {
  transform: scale(1.1) translate(10px, -70px);
}