<h2>Animating Target Elements</h2>
<div class="backdrop">
  <div class="target a">
  </div>
  <div class="target b">
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 5px auto;
  width: 98%;
  text-align: center;
  font-family: 'Lato';
  font-weight: 300;
}

h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 2em;
}

.backdrop {
  background: url('https://i.imgbox.com/iuNBi4ij.jpg');
  background-size: cover;
  height: 450px;
  margin-bottom: 40px;
  position: relative;
  cursor: crosshair;
}

.target {
  position: absolute;
  top: 0%;
  height: 0%;
  width: 0%;
  background: rgba(0, 0, 0, 0);
}

.a {
  backdrop-filter: contrast(2);
  width: 0%;
  height: 100%;
  transition: width 0.5s;
}

.b {
  backdrop-filter: grayscale(0.75);
  width: 100%;
  height: 0%;
  transition: height 0.5s linear;
}

.backdrop:hover .a{
  width: 75%;
}

.backdrop:hover .b{
  height: 75%;
}

p {
  color: white;
  font-size: 1.25em;
}

h3 {
  color: white;
  margin-bottom: 15px;
  font-size: 2em;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

This Pen doesn't use any external JavaScript resources.