<header>
  <h1>CSS Mix Blend Modes</h1>
  <h3>15 Spotify Colorizer-style Image Filters Using CSS</h3> <a href="http://caniuse.com/#search=mix-blend" target="_blank">( Check Usage )</a> & <a href="http://webdesignerwall.com/tutorials/create-spotify-colorizer-effects-css-blend-modes" target="_blank">View Tutorial</a>
</header>
<section>
  <div class="column green"><img src="https://images.pexels.com/photos/60883/girl-eyes-makeup-sexy-60883.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/></div>
  <div class="column red-purple"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/girl-eyes-makeup-sexy-60883.jpeg"/></div>
</section>
<section>
  <div class="column vintage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo.jpg"/></div>
  <div class="column retro"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-194074.jpg"/></div>
  <div class="column blue-light"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-207081.jpeg"/></div>

  <div class="column blue"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-157675.jpeg"/></div>
  
  <div class="column dark-red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-432059.jpeg"/></div>
  <div class="column flat-retro"><img src="https://images.pexels.com/photos/167483/pexels-photo-167483.jpeg?h=350&auto=compress"/></div>
</section>





<section>
  <div class="column teal"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-305241.jpeg"/></div>
  <div class="column purple"><img src="https://images.pexels.com/photos/164732/pexels-photo-164732.jpeg?h=350&auto=compress&cs=tinysrgb"/></div>
  <div class="column pink"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-175696.jpeg"/></div>
</section>

<section>
  <div class="column yellow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/pexels-photo-704977.jpeg"/></div>
  <div class="column orange"><img src="https://images.pexels.com/photos/157920/woman-face-curly-hair-157920.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"/></div>
  <div class="column blue-red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/927610/fashionable-girl-in-glasses-in-the-black-pants-157886.jpeg"/></div>
  <div class="column gold"><img src="https://images.pexels.com/photos/9137/night-vintage-music-bokeh.jpg?h=350&auto=compress"/></div>
</section>
<!-- Images from https://www.pexels.com/
 Extra special thanks to Collins for kicking off this 
 wonderful trend. http://www.wearecollins.com/work/spotify/
-->

/* Layout */
html {
  box-sizing: border-box;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(140deg, #1b1d35, #171d58);
  
}
a{
  color: #eee;
  font-size: .6rem;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all ease-in-out .3s;
}
a:hover{
  opacity: .8;
}
h1{
  font-size: 3rem;
}
h1, h3{
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 1% 0;
}
header, section {
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

}
.column {
  margin: 2%;
  flex: 1 1 0;
  position: relative;
  padding: 1rem;
  min-height: 33vh;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all ease-in-out .3s;
  min-width: calc(33.33% / 2);
}
section:nth-of-type(5) .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}
section:nth-of-type(6) .column:nth-of-type(2) {
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 66px;
}
.column img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all ease-in-out .5s;
}
.column:hover {
    color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/* Color Overlay position */
.column::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all ease-in-out .5s;
}
/* Removed effects to show original on hover */
.column:hover::after, .column:hover, .column:hover img{
  filter: none;
  -webkit-filter: none;
  mix-blend-mode: unset !important;
  background: transparent;
}

/* COLORS */

.green{
  background-color: #00ff36;
}
.green img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1);
}
.green::after{
  background-color: #23278a;
  mix-blend-mode: lighten;
}

.red-purple{
  background-color: #e41c2d;
}
.red-purple img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1);
  filter: grayscale(100%) contrast(.8);
}
.red-purple::after{
  background-color: #1d3162;
  mix-blend-mode: lighten;
}


.retro{
background-color: #f1e3a0;
}
.retro img{
   mix-blend-mode: darken;
  -webkit-filter: grayscale(100%) contrast(2);
  filter: grayscale(100%) contrast(2);
}
.retro::after{
  background: linear-gradient(180deg, #f430a9, #f2e782);
  mix-blend-mode: lighten;
}

.vintage{
  background-color: #caeaf2;
}
.vintage img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.5);
  filter: grayscale(100%) contrast(1.5);
}
.vintage::after{
  background-color: #2cd6e1;
  mix-blend-mode: lighten;
}

.blue-light{
  background-color: #181e59;
}
.blue-light img{
   mix-blend-mode: lighten;
  -webkit-filter: grayscale(100%) contrast(.8);
  filter: grayscale(100%) contrast(.8);
}
.blue-light::after{
  background-color: #E7E1A6;
  mix-blend-mode: multiply;
}

.blue{
  background-color: #77acd4;
}
.blue img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
}
.blue::after{
  background-color: #033dc5;
  mix-blend-mode: lighten;
}


.dark-red{
  background-color: #ed060b;
}
.dark-red img{
    -webkit-filter: grayscale(100%) contrast(1.2);
    filter: grayscale(100%) contrast(1.2);
    mix-blend-mode: lighten;
}
.dark-red::after{
   background-color: #70e4ee;
   mix-blend-mode: multiply;
}

.flat-retro{
  background-color: #FCA300;
}
.flat-retro img{
   mix-blend-mode: darken;
  -webkit-filter: grayscale(100%) contrast(1.5);
  filter: grayscale(100%) contrast(1.5);
}
.flat-retro::after{
   background-color: #e23241;
  mix-blend-mode: lighten;
}

.teal{
  background-color: #d7a621;
}
.teal img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
}
.teal::after{
  background-color: #0c6249;
  mix-blend-mode: lighten;
}

.purple{
  background-color: #88169d;
}
.purple img{
  -webkit-filter: grayscale(100%) contrast(1.2);
    filter: grayscale(100%) contrast(1.2);
  mix-blend-mode: lighten;
}
.purple::after{
  mix-blend-mode: hard-light;
  background: linear-gradient(to top left, #75d775, #321a5b);
}

.pink{
  background-color: #FCA300;
}
.pink img{
  mix-blend-mode: darken;
}
.pink::after{
  background: #282581;
  mix-blend-mode: lighten;
  -webkit-filter: contrast(1.1);
  filter: contrast(1.1);
}



.yellow{
  background-color: #e0de2c;
}
.yellow img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(.8);
  filter: grayscale(100%) contrast(.8);
}
.yellow::after{
  background-color: #b71310;
  mix-blend-mode: lighten;
}

.orange{
  background-color: #f65e35;
}
.orange img{
   mix-blend-mode: multiply;
  -webkit-filter: grayscale(100%) contrast(1.2);
  filter: grayscale(100%) contrast(1.2);
}
.orange::after{
  background-color: #1e3265;
  mix-blend-mode: lighten;
}

.blue-red{
  background-color: #E50914;
}
.blue-red img{
  -webkit-filter: grayscale(100%) contrast(1.2);
    filter: grayscale(100%) contrast(1.2);
  opacity:.8;
}
.blue-red::after{
   mix-blend-mode: lighten;
    -webkit-filter: contrast(1.1);
    filter: contrast(1.1); 
  background-color: #282581;
}

.gold{
  background-color: #367ABD ;
}
.gold img{
   mix-blend-mode: lighten;
  -webkit-filter: grayscale(100%) contrast(1);
  filter: grayscale(100%) contrast(.8);
}
.gold::after{
  background-color: #F9ED3A;
  mix-blend-mode: multiply;
}