Overlay on hover link [CSS / HTML]

Question

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.

http://jsfiddle.net/cno63gny/

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

.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;
}

<div class="post">
  <div class="overlay">
    <p>Text</p>
    <p><a href="">Link</a></p>
  </div>
</div>

Answer 1

Make the overlay div an anchor, and in CSS set it to display:block because anchors are inline.

In HTML5 it's fine to put block p tags inside anchors.

.post {
  width: 300px;
  height: 300px;
  background: url("http://lorempixel.com/300/300");
  margin: 5% auto 0 auto;
  background-size: cover;
  overflow: hidden;
}

.overlay {
  display: block;
  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;
}

<div class="post">
  <a href="http://google.com" class="overlay">
    <p>Text</p>
    <p>Link</p>
  </a>
</div>