<div id="wrap">
  <div class="centerer">
  
    <div class="gallery">
      <div class="gallery__nav">
        <div class="gallery-item gallery-item--active">
          <img src="https://avatars.mds.yandex.net/get-pdb/34158/5b220473-4fab-4b8d-b779-86d29fcdd63b/s1200" alt="">
        </div>
        
        <div class="gallery-item">
          <img src="https://avatars.mds.yandex.net/get-pdb/225396/23265ff9-2a5e-417e-b8e9-3e5de33554e0/s1200" alt="">
        </div>
        
        <div class="gallery-item">
          <img src="https://avatars.mds.yandex.net/get-pdb/1863907/afe6db4c-6aa7-48df-8f21-e26e40cad910/s1200" alt="">
        </div>
      </div>
      <div class="gallery__view">
        <img src="https://avatars.mds.yandex.net/get-pdb/34158/5b220473-4fab-4b8d-b779-86d29fcdd63b/s1200" alt="">
      </div>
    </div>
    
  </div>
</div>

// autoprefixer: true

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.centerer {
  width: 100%;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

.gallery {
  width: 500px;
  height: 500px;
  margin: auto;
  display: flex;
  align-items: stretch;

  &__nav {
    width: 100px;
    flex: 0 0 auto;
    background: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &__view {
    flex-grow: 1;
    background: #fafafa;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

.gallery-item {
  padding: 5px;
  cursor: pointer;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: fade(#89c0ef, 30%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }

  img {
    display: block;
    width: 100%;
  }

  &:hover,
  &--active {
    &::before {
      opacity: 1;
    }
  }
  
  &--active {
    cursor: default;
  }
}

$(function () {

  $('.gallery').each(function() {
    var $gallery = $(this),
      $view = $gallery.find('.gallery__view'),
      $item = $gallery.find('.gallery-item');
    
    $item.click(function() {
      var $theItem = $(this);
      
      if(!$theItem.hasClass('gallery-item--active')) {
        var src = $(this).find('img').attr('src');
        
        $view.html('<img src="' + src + '" alt="">');
        $theItem.addClass('gallery-item--active').siblings().removeClass('gallery-item--active');
      }
      
    });
  });

});