Question

我有一个悬停效果的图片，以显示带有文字和链接的叠加层，我无法将图像作为链接，我甚至尝试将叠加层创建为链接，但它不起作用。< / p>

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

.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中将其设置为显示：块因为锚点是内联的。

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

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

1 个答案: