Bootstrap覆盖可单击的链接

Question

希望我能够在这里提供足够的代码，但是我希望在我正在建造的Bootstrap Image Gallery上提供一些帮助。目前，我有各种各样的图像出现在投资组合中，并且在滚动后出现"覆盖"，以及用户可以单击以打开灯箱的图标；

<div class="container-fluid full-width">
  <div class="row row-no-gutter">
    <div class="col-md-push-0 col-md-12 col-sm-12 col-sm-push-0 content">
      <div class="isotope_items">
        <div class="single_item link web-design col-md-3 col-sm-6 col-xs-12">
          <div class="work-inner">
            <div class="work-overlay">  
              <div class="overlay-in">
                <div class="work-info">   
                  <div class="work-links">                                             
                    <a href="images/work-1.jpg" class="image-link lightbox"><i data-icon="W" class="icon" style="color:white"></i></a>
                  </div>
                </div>
              </div>
            </div>
              <a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>
          </div>
        </div>
      </div>

相关CSS;

.work-inner {
  position: relative;
}
.work-overlay {
  position: absolute;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.overlay-in {
  display: table;
  height: 100%;
  width: 100%;
}
.work-info {
  display: table-cell;
  vertical-align: middle;
}
.overlay-in p {
  font-size: 18px;
  line-height: 20px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  opacity: 0;
  -webkit-transform: translate3d(0, 80px, 0);
  -moz-transform: translate3d(0, 80px, 0);
  -ms-transform: translate3d(0, 80px, 0);
  -o-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
.overlay-in .work-links {
    margin-top: 20px;
    opacity: 0;
    display: block;
    -webkit-transform: translate3d(0, 80px, 0);
    -moz-transform: translate3d(0, 80px, 0);
    -ms-transform: translate3d(0, 80px, 0);
    -o-transform: translate3d(0, 80px, 0);
    transform: translate3d(0, 80px, 0);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.overlay-in .work-links a {
  font-size: 20px;
  color: #000;
  margin-right: 10px;
  text-decoration: none;
  opacity: 1;
}
.overlay-in .work-links a:hover{ 
  opacity:0.5;
}
.work-inner:hover > .work-overlay{ 
  background: rgba(0, 0, 0, 0.80);
  opacity:1;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.work-inner:hover .overlay-in p{
  opacity:1;
  color: #000;
  line-height: 24px;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0.3s; 
  transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
}
.work-inner:hover .overlay-in .work-links{
  opacity:1;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
}

但是，我在做的事情正在做到这一点，因此可以单击整个图像，而不仅仅是数据图标。您可以想象，只有单击图标才能为无法准确单击图标的移动设备创建问题。

更新的代码 - 对不起！

Answer 1

用解决方案编辑：

在我们讨论并查看您在35.153.183.88/portfolio上发布的示例代码后，我们确定解决此问题的解决方案只是将锚定标签从图标中移动，以涵盖触发您的覆盖的DIV。

所以，让您的锚标签这样：

// Other Divs
<div class="work-inner">
    <a href="images/work-1.jpg" class="image-link lightbox">
        <div class="work-overlay"> 
             // Other divs/image/icon.
        </div>
    </a>
</div>

我在下面留下了我的原始建议。

/ ========== reted答案以下。======== /

锚标签内的任何内容都是链接。如果模板的结构不允许您移动锚标签内的图像，则可以尝试在图像周围复制锚标签，或者只是移动到图像并将其从图像中删除。

我没有在下面包含您的所有divs，因为格式化这是一场噩梦。

重复：

<a href="images/work-1.jpg" class="image-link lightbox"><i data-icon="W" class="icon" style="color:white"></i></a>

然后...

<a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>

移动到映像

<i data-icon="W" class="icon" style="color:white"></i>

然后...

<a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>

第二个，如果您需要保留图标的链接样式，则将" Image-Link Lightbox" CSS类添加到图标类中：

<i data-icon="W" class="icon image-link lightbox" style="color:white"></i>

希望会有所帮助。