<div class="gallery">
  <div>
    <img src="https://images.unsplash.com/photo-1573679472180-df7d6cbe22bf" alt="">
    <img src="https://images.unsplash.com/photo-1572917218430-5aa0e4e26012" alt="">
    <img src="https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5" alt="">
    <img src="https://images.unsplash.com/photo-1524260855046-f743b3cdad07" alt="">
  </div>
</div>

.gallery{
  width:600px;
  height:400px;
  overflow:hidden;
  margin: 20px auto;
  border-radius:15px;
  div{
    display:flex;
    flex-wrap:wrap;
    height:100%;
    width:100%;
    transition: transform .25s ease-in-out;
    &.focus_0, &.focus_1, &.focus_2, &.focus_3{
      transform:scale(2);
    }
    &.focus_0{
      transform-origin: top left;
    }
    &.focus_1{
      transform-origin: top right;
    }
    &.focus_2{
      transform-origin: bottom left;
    }
    &.focus_3{
      transform-origin: bottom right;
    }
    img{
      width:50%;
      height:50%;
      object-fit:cover;
      cursor: pointer;
    }
    &.ss{
        filter:grayscale(100);
      }
  }
}

$('.gallery img').click(function(){
  var index = $('.gallery img').index(this);
  var className = 'focus_' + index;
  var parent = $(this).parent('div')
  
  if(!parent.hasClass(className)){
    parent.removeClass(function (index, css) {
      return (css.match (/\bfocus_\S+/g) || []).join(' ');
    }).addClass(className)
  } else {
    parent.removeClass(className)
  }
  
});