Links not working with Overlay

Question

I have a couple of tiles with overlays that darken and a title appears when hovered over:

.photo {
  position: relative;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.photo img {
  width: 100%;
  vertical-align: top;
}
.photo:after,
.photo:before {
  position: absolute;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}
.photo:after {
  content: '\A';
 width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}
.photo:before {
  width: 100%;
  content: attr(data-content);
  color: $white;
  text-align: center;
  font-size: 200%;
  z-index: 1;
  padding: 4px 10px;
}
.photo:hover:after,
.photo:hover:before {
  opacity: 1;
}

<div class="wrap-photo">
  <div class="photo" data-content="Benefits">
    <a href="kb_view.do?sysparm_article=KB0010030">
      <img src="Wellness.jpg" alt="" width="100%" height="100%" />
    </a>
  </div>

  <div class="photo" data-content="Payroll">
    <a href="kb_view.do?sysparm_article=KB0010031">
      <img src="award.jpg" alt="" width="100%" height="100%" />
    </a>
  </div>

  <div class="photo" data-content="Training">
    <a href="#" target="_blank">
      <img src="Personnel.jpg" alt="" width="100%" height="100%" />
    </a>
  </div>
</div>

The issue is with the overlay effect in place, it blocks out the link and makes it unclickable. I've tried messing with the z-indexes, but when one thing works, the other thing is blocked. I want the overlay and text to work when hovered over, but also clickable, is this possible?

Answer 1

You can move :before and :after selectors to a tag and then modify .photo a:before to center text vertically.

.photo a:before {
  [...]
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
}

.photo {
  position: relative;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.photo img {
  width: 100%;
  vertical-align: top;
}

.photo a:after,
.photo a:before {
  position: absolute;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.photo a:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

.photo a:before {
  width: 100%;
  content: attr(data-content);
  color: $white;
  text-align: center;
  font-size: 200%;
  z-index: 1;
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
}

.photo a:hover:after,
.photo a:hover:before {
  opacity: 1;
}

<div class="wrap-photo">
  <div class="photo">
    <a href="kb_view.do?sysparm_article=KB0010030" data-content="Benefits">
      <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" />
    </a>
  </div>

  <div class="photo">
    <a href="kb_view.do?sysparm_article=KB0010031" data-content="Payroll">
      <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" />
    </a>
  </div>

  <div class="photo">
    <a href="#" target="_blank" data-content="Training">
      <img src="http://placehold.it/200x100" alt="" width="100%" height="100%" />
    </a>
  </div>
</div>