title: Make Image overlay clickable to link to another page
body: <p>jsfiddle: <a href="https://jsfiddle.net/e0u4sow1/" rel="nofollow">https://jsfiddle.net/e0u4sow1/</a></p>
  
  <p>I want to use the following code for an image to link to another page. Right now if I make it a link it doesn't work. I read somewhere I need to add </p>
  
  <pre><code>pointer-events: none;
  </code></pre>
  
  <p>somewhere in the code. It tried, but it either doesn't work or it works but removes the overlay. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1&gt;MR Cube&lt;/h1&gt;
  &lt;div class="media"&gt;&lt;/div&gt;
  &lt;div class="media"&gt;&lt;a href="http://www.google.nl/"&gt;&lt;img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" /&gt;&lt;/a&gt;
  &lt;div class="media__body"&gt;
  &lt;h1&gt;Lees meer&lt;/h1&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.media {
      display: inline-block;
      position: relative;
      vertical-align: top;
  }
  
  .media__image { display: block; }
  
  .media__body {
    background: rgba(41, 128, 185, 0.7);
    bottom: 0;
    color: white;
    font-size: 1em;
    left: 0;
    opacity: 0;
    overflow: hidden;
    padding: 3.75em 3em;
    position: absolute;
    text-align: center;
    top: 0;
    right: 0;
    -webkit-transition: 0.6s;
    transition: 0.6s;
  }
  
  .media__body:hover { opacity: 1; }
  
  .media__body:after,
  .media__body:before {
    border: 1px solid rgba(255, 255, 255, 0.7);
    bottom: 1em;
    content: '';
    left: 1em;
    opacity: 0;
    position: absolute;
    right: 1em;
    top: 1em;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: 0.6s 0.2s;
    transition: 0.6s 0.2s;
  }
  
  .media__body:before {
    border-bottom: none;
    border-top: none;
    left: 2em;
    right: 2em;
  }
  
  .media__body:after {
    border-left: none;
    border-right: none;
    bottom: 2em;
    top: 2em;
  }
  
  .media__body:hover:after,
  .media__body:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  
  .media__body h2 { margin-top: 0; }
  
  .media__body p { margin-bottom: 1.5em; }
  </code></pre>