Question

我有几块瓷砖，覆盖层变暗，悬停在标题上时出现标题：

＆＃13;

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

＆＃13;

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

＆＃13;

问题在于叠加效果到位，它会阻挡链接并使其无法点击。我曾尝试搞乱z-index，但当一件事情起作用时，另一件事就被阻止了。我希望叠加和文本在悬停时工作，但也可以点击，这可能吗？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

链接无法使用Overlay

1 个答案: