<h2>Filter Property</h2>
<img class="just-filter" src="https://i.imgbox.com/JGXLxgQb.jpg">

<h2>Backdrop Filter</h2>
<div class="backdrop">
  <div class="content">
  <h3>A Heading</h3>
    <p>Some random text related to the heading.</p>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  width: 560px;
  text-align: center;
  font-family: 'Lato';
  font-weight: 300;
}

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

img {
  max-width: 100%;
  margin-bottom: 10px;
}

.just-filter {
  filter: hue-rotate(180deg);
}

.backdrop {
  background: url('https://i.imgbox.com/JGXLxgQb.jpg');
  background-size: contain;
  height: 320px;
  margin-bottom: 40px;
  margin-top: -30px;
}

.content {
  position: relative;
  top: 30%;
  padding: 20px 15px;
  margin: 40px auto;
  background: rgba(100,150,100,0.35);
  backdrop-filter: hue-rotate(180deg);
}

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.