悬停时叠加 link [CSS / HTML]

Question

我有一张带有悬停效果的图像，可以显示带有文本和 link 的叠加层，但我无法将图像设为 link，我什至尝试将叠加层创建为一个 link 但它没有用。

您可以忽略文本和 link，它们只是未来的占位符。不要恨我，因为它可能很明显，我还在学习

.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

将叠加层 div 设为锚点，并在 CSS 中将其设置为 display:block 因为锚点是内联的。

在HTML5中，可以将块 p 标签放在锚点内。

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

悬停时叠加 link [CSS / HTML]

Overlay on hover link [CSS / HTML]

html

css

overlay

image

hover