链接不适用于 Overlay

Question

我有几个带有覆盖层的图块会变暗，并且在悬停时会出现一个标题：

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

问题出在叠加效果上，它挡住了 link 并使其无法点击。我试过弄乱 z-indexes，但是当一个东西起作用时，另一个东西被阻止了。我希望叠加层和文本在悬停时有效，但也可以点击，这可能吗？

Answer 1

您可以将 :before 和 :after 选择器移动到 a 标记，然后修改 .photo a:before 使文本垂直居中。

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

链接不适用于 Overlay

Links not working with Overlay

css

overlay

z-index

hyperlink