<div class="module">

  <div class="module__controls">

  <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>
.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;
View Compiled
$('button').on('click', function() {
  $('.module__content').css('isolation', $(this).text());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js