title: Overlay on hover link [CSS / HTML]
body: <p>I have a image with hover effect to reveal a overlay with text and a link, and I can't get the image to be a link, I even tried creating the overlay as an link but it didn't work.</p>
  
  <p><a href="http://jsfiddle.net/cno63gny/" rel="nofollow">http://jsfiddle.net/cno63gny/</a></p>
  
  <p>You can ignore text and link, those are just placeholders for future.
  Don't hate me cause it is probably obvious, I am still learning</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.post {
    width: 300px;
    height: 300px;
    background: url("http://lorempixel.com/300/300");
    margin: 5% auto 0 auto;
    background-size: cover;
    overflow: hidden;
  }
  
  .overlay {
    background: rgba(63, 63, 63, 0.8);
    text-align: center;
    padding: 20px 0 203px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
  }
  
  .post:hover .overlay {
    visibility: visible;
    opacity: 1;
  }
  
  .overlay a,
  .overlay p {
    color: #47f197;
    font-size: 18px;
    font-family: Helvetica;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .overlay p {
    margin-top: -5px;
    margin-bottom: 230px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post"&gt;
    &lt;div class="overlay"&gt;
      &lt;p&gt;Text&lt;/p&gt;
      &lt;p&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>