<div class="card screen">Screen</div>
<div class="card multiply">Multiply</div>
<div class="card saturation">Saturation</div>
<div class="card overlay">Overlay</div>
$overlay-color: rgba(30, 30, 200, 0.3);
$overlay-gradient: linear-gradient(180deg, transparent, rgba(30, 30, 200, 0.8));

.card {
  box-sizing: border-box;
  position: relative;
  width: 40vw;
  height: 40vh;
  margin: 5vh;
  padding: 1vh;
  overflow: hidden;
  font-size: 3vh;
  font-weight: bold;
  color: #eee;
  background-image: url("https://images.unsplash.com/photo-1444412667101-4eccfdeeff07?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=");
  background-position: center center;
  background-size: cover;
  box-shadow: 0.5vh 0.5vh 1.5vh rgba(0, 0, 0, 0.5);
  text-shadow: 0.2vh 0.2vh 0.5vh rgba(0, 0, 0, 0.5);
  
  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: $overlay-color;
    background-image: $overlay-gradient;
    transition: left 0.5s ease-in-out;
  }
  
  &:hover:before {
    left: 80%;
  }
  
  &.screen:before {
    mix-blend-mode: screen;
  }
  &.multiply:before {
    mix-blend-mode: multiply;
  }
  &.saturation:before {
    mix-blend-mode: saturation;
  }
  &.overlay:before {
    mix-blend-mode: overlay;
  }
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #222;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.