0

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>

Improve this question

1 Answer 1

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.