html - 添加指向叠加图像的链接

Question

我想添加指向应用了叠加层的图像的链接。当用户将鼠标悬停在图像上时，他们会得到一个不透明的覆盖层并出现文本。这很好用，但是我还需要用户能够单击该图像并转到链接。

我已将我的代码粘贴在下方 - 叠加层有效但链接部分无效。我相信这是因为覆盖层在干扰。我尝试更改链接的位置，但无法这样做。我可以将“+”设为链接，但理想情况下应该链接整个图像。

有什么想法吗？

JSFiddle

.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #cdcbca;
  visibility: hidden;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, visibility .2s;
}
    
    .roomphoto {
        height: 166px;
    }
    
    .img__description {
        transition: .2s;
        transform: translateY(1em);
        z-index: 999;
    }
    
    .overlay {
      position: relative;
    }
    
    .overlay:after {
      position: absolute;
      content:"";
      top:0;
      left:0;
      width:100%;
      height:100%;
      opacity:0;
    }
    
    .overlay:hover:after  {
      opacity: .8;
    }
    
    .blue:after {
      background-color: #1a3761;
    }
    
    .img__description a {
    	color: #fff;
    }
    
    .roomselect {
    clear: both;
    float: none;
    width: 100%;
    max-width: 1000px;
    margin: 0px auto;
    padding-top: 20px;
    }
    
    .roomselect img {
    width: 100%;
    margin-bottom: -10px;
    }
    
    
    .room3 {
    width: 32%;
    text-align: left;
    float:left;
    }

<div class="roomselect"><div class="room3">
  <div class="roomphoto overlay blue">
    <a href="http://www.google.com">
      <img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
    </a>
    <div class="img__description_layer">
      <p class="img__description">
        <span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
      </p>
    </div>
  </div>
</div>

Answer 1

您需要重新排列您的 html，以便当您点击图片时，您实际上是在点击 anchor 标记。我对您的 html 进行了一些更改，如果这些有效，请告诉我。您可能需要增加房间照片的高度。

<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
  <div class="roomphoto overlay blue">
  <img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />

  <div class="img__description_layer">
    <p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
  </div>
  </div>
</a>

</div>
</div>