JSFiddle - React, Tailwind, and code Playground

Css filters Base

by schrodingers

HTML

<body>
  <h1>Фото-галерея.</h1>
  <!-- BIG PHOTO     -->
  <div class="gallery">
    <div class="photo">
      <img src="https://unsplash.it/600/400?image=790">
    </div>

    <ul class="filters">
      <!-- FILTER PREVIEWS     -->
      <li class="walden active" data-filter="walden">
      </li>

      <li class="toaster" data-filter="toaster">
      </li>

      <li class="kelvin" data-filter="kelvin">
      </li>

      <li class="lomo" data-filter="lomo">
      </li>

      <li class="vintage" data-filter="vintage">

      </li>
    </ul>

  </div>

</body>

SCSS

h1 {
  display: none;
}

body {
  background: #444;
}

.gallery {
  /*     overflow: hidden; */
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  justify-content: center;
  padding: 1em;
  background: #555;
  margin: 10%;
}


/* HEADER PHOTO */

#photo-main img {
  border: 0.35em white solid;
//  width: 100%;

}

.filters {
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: space-between;
  justify-content: flex-start;
  /*   padding: 1em; */
}

.filters li img {
  //  margin: 0.5em 0.5em 0.5em 0;
  height: 8em;
 // border: solid .35em rgba(255, 255, 255, 0.25);
  transition: all 0.5s ease-out;
  object-fit: cover;
  
}

.filters li img:hover {
  border-color: rgba(255, 255, 255, 1);  
}



/* FILTERS */

.walden {
  -webkit-filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
  filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
}

.toaster {
  -webkit-filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);
  filter: saturate(2.5) hue-rotate(-30deg) contrast(0.67) sepia(0.4);
}

.kelvin {
  -webkit-filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
  filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
}

.lomo {
  -webkit-filter: contrast(2) saturate(3);
  filter: contrast(2) saturate(3);
  background: darkcyan;
    background-blend-mode: lighten;

}

.vintage {
  /* background-color: #533a16; */
}

JavaScript

// Css-filters Base

var photo = document.querySelector('.photo img');
var filters = document.querySelectorAll('.filters li');
var img = document.createElement('img');
img.setAttribute('src', photo.src);

for (var i = 0; i < filters.length; i++) {
  //filters[i].appendChild(img);
  filters[i].innerHTML = '<img src="' + photo.src + '">';

  //filters[i].innerHTML += filters[i].dataset.filter;
  filters[i].addEventListener('click', function() {
    photo.classList.toggle(this.dataset.filter);
  });
}


photo.addEventListener('click', function() {
  photo.setAttribute('class', photo.dataset.filter);

});