悬停链接上的叠加层 [CSS / HTML]答案

【问题标题】：Overlay on hover link [CSS / HTML]悬停链接上的叠加层 [CSS / HTML]
【发布时间】：2016-04-06 20:40:43
【问题描述】：

我有一个带有悬停效果的图像来显示带有文本和链接的叠加层，但我无法将图像作为链接，我什至尝试将叠加层创建为链接，但它不起作用。

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

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

【问题讨论】：

标签： html css image hover overlay

【解决方案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>

【讨论】：