<h2>Blurring Out Graphic Content</h2>
<div class="backdrop">
  <img src="https://i.imgbox.com/j1ehy4Q3.jpg">
  <div class="warning">
    <h3>Graphic Content</h3>
    <p>Click on the button below to see the image from the murder scene.</p>
    <button>Show Me</button>
  </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;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}

.backdrop {
  width: 600px;
  height: 397px;
  margin: 15px auto;
  position: relative;
}

.warning {
  position: absolute;
  padding: 20% 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.75);
  backdrop-filter: contrast(4) blur(20px);
}

button {
  border: none;
  background: red;
  color: white;
  font-weight: 300;
  font-family: 'Lato';
  font-size: 1.5em;
  padding: 0.5em;
  margin-top: 40px;
  cursor: pointer;
}

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

h3 {
  color: white;
  margin-bottom: 15px;
  font-size: 2em;
}
$("button").on("click", function() {
  $(".warning").css("display","none");
});

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js