JSFiddle - React, Tailwind, and code Playground

Css filters Extended (colorfilters.css)

by schrodingers

HTML

<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<h1>Css filters.</h1>
<div class="gallery">
  <div class="photo">
  </div>

  <div class="filters">
    <!-- FILTER PREVIEWS     -->
    <div class="filter" data-filter="walden">
    </div>

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

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

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

    <div class="filter" data-filter="vintage">
    </div>
  </div>

CSS

h1 {
  display: none;
}

body {
  background: #444;
  display: flex;
  flex-flow: column nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.gallery {
  padding: 1em;
  background: #555;
  margin: 0 10%;
}


/* HEADER PHOTO */

.photo img {
  border: 0.35em white solid;
  width: 100%;
}

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

.filters > * img {
  margin: 0.5em 0.5em 0.5em 0;
  height: 8em;
  /* width: 100%; */
  object-fit: cover;
}


/* 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;
}

// Blendings from colorfilter.css tool
.blend-blue-yellow {}

.filter:hover {
  animation: kiss-in 0.75s ease-out;
  //border: white solid 1px;
}

@keyframes kiss-in {
  66% {
    -webkit-filter: brightness(130%);
  }
}

JavaScript

// Css-filters Extended (colorfilters.css)
// Array with photos id-s to choose from.
var rand = [645, 660, 404, 701, 696, 730, 780, 779];
// randomly choose photos url
var photoUrl = 'https://unsplash.it/600/400?image=' + rand[Math.floor(Math.random() * rand.length)];
// Select photo holder
var holder = document.querySelector('.photo');
// Create an image-element, setAttribute with randomly selected url
var photo = document.createElement('img');
photo.setAttribute('src', photoUrl);
// Add selected photo to its holder
holder.appendChild(photo);

var filters = document.querySelectorAll('.filter');




for (var i = 0; i < filters.length; i++) {
  filters[i].innerHTML = '<img src="' + photo.src + '">';
  filters[i].addEventListener('click', function() {
    photo.classList.toggle(this.dataset.filter);
  });
}


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

});