<div class="module">

  <div class="module__controls">
    <button>isolate</button>
    <button>auto</button>
  </div>

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-90/ruver.jpg" alt="">
  <div class="module__content">
    <blockquote>“The surest sign that intelligent life exists elsewhere in the universe is that it has never tried to contact us.”
    <cite>&mdash; Bill Watterson</cite>
    </blockquote>
  </div>
</div>

.module {}

.module__content {}

blockquote {
  position: absolute;
  top: 3em;
  left: 10%;
  background-color: #555;
  border: 15px solid #000;
  color: #fff;
  font-size: 3em;
  padding: 25px 10px;
  mix-blend-mode: overlay;
  text-align: center;
  width: 70%;
}

cite {
  color: #ccc;
  display: block;
  font-size: 50%;
  margin-top: 25px;
}

img {
  width: 100%;
  height: auto;
}

.module__controls {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

button {
  padding: 10px;
  margin: 0 10px;
}

$('button').on('click', function() {
  $('.module__content').css('isolation', $(this).text());
});