如何使重叠图像可点击；图像透明度妨碍了？

Question

请参阅this JSFiddle。

我正在使用 Twitter-Bootstrap。我在这里要完成的是在 md+ 设备上，有一排 4 个菱形/缩略图，第二排 3 个，都相当接近但不接触。当用户在较小的设备上时，菱形从 2 行切换，然后是 3 行，然后是 2 行。我现在的代码可以正常工作，正如您在 JS Fiddle 上看到的那样，但是如果你有一个更干净的方式来做这没有 JS 请分享。 :)

当我尝试使图像可点击时，我的问题出现了，因为这些将是缩略图，我想使用 Featherlight（您可能知道的灯箱替代品），这样当用户点击缩略图时，我可以有一个框弹出更大的图像和有关它的信息。我将其从 JSFiddle 中删除，而是使用“常规”链接进行演示。这些钻石图像的透明度是问题所在。由于图像靠得很近，其中一颗钻石的透明部分总是与另一颗重叠，从而使每颗钻石的一部分链接到一颗不想要的钻石。

我尝试了图像映射和更改 z-index。重叠透明度问题仍然存在。会用 CSS 来创建这个形状吗（我该怎么做）？有什么解决办法呢？非常感谢您的帮助！

HTML：

<section class="container-fluid diamonds">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="xsrow1">
                <div class="col-md-3 col-xs-6 xsright no-padding"><a href="#0"><img src="http://i57.tinypic.com/o5565j.png"></a>
                </div>
                <div class="col-md-3 col-xs-6 no-padding"><a href="#1"><img src="http://i57.tinypic.com/o5565j.png"></a>
                </div>
            </div>
            <div class="col-md-3 col-xs-4 xsRow2Margin no-padding"><a href="#2"><img src="http://i57.tinypic.com/o5565j.png"></a>
            </div>
            <div class="col-md-3 col-xs-4 xsRow2Margin no-padding"><a href="#3"><img src="http://i57.tinypic.com/o5565j.png"></a>
            </div>
        </div>
        <div class="col-md-8 col-md-offset-2 mdrow2">
            <div class="col-md-4 col-xs-4 xsRow2Margin no-padding"><a href="#4"><img src="http://i57.tinypic.com/o5565j.png"></a>
            </div>
            <div class="xsrow3">
                <div class="col-md-4 col-xs-6 xsright no-padding"><a href="#5"><img src="http://i57.tinypic.com/o5565j.png"></a>
                </div>
                <div class="col-md-4 col-xs-6 no-padding"><a href="#6"><img src="http://i57.tinypic.com/o5565j.png"></a>
                </div>
            </div>
        </div>
    </div>
</section>

CSS：

.no-padding {
    padding: 0!important;
    padding-right: 3px!important;
    padding-left: 3px!important;
    margin: 0!important;
}
.diamonds {
    position: relative;
}
.diamonds img {
    width: 100%;
    height: auto;
}
@media (max-width: 479px) {
    .xsRow2Margin {
        margin-top:-15.2%!important;
        margin-bottom:-15.2%!important;
    }
    .no-padding {
        padding-right: 2px!important;
        padding-left: 2px!important;
    }
}
@media (max-width: 991px) {
    .xsrow1 img, .xsrow3 img {
        width: 66%!important;
        height: auto;
    }
    .xsright {
        text-align: right;
    }
}
@media (min-width: 480px) and (max-width: 991px) {
    .diamonds {
        margin-left: 1%;
        margin-right: 1%;
    }
    .xsRow2Margin {
        margin-top:-15.9%!important;
        margin-bottom:-15.9%!important;
    }
}
@media (min-width: 992px) {
    .mdrow2 {
        position: absolute;
        top: 51%;
        left:0%;
        padding-left: 3%;
        padding-right: 3%;
    }
}

Answer 1

我有一个解决方案。我已将锚标记放在图像顶部的中心并将其旋转 45 度。为锚点提供最高的 z-index。我只做了一颗钻石，所以你可能需要对你的 CSS 做一些调整。

.img{
height:168px;
  width:168px;

}

.link{
transform: rotate(45deg);
    position: absolute;
    height: 118px;
    width: 118px;
    left: 25px;
    top: 25px;
}

<div class="col-md-3 col-xs-4 xsRow2Margin no-padding"><img class="img" src="http://i57.tinypic.com/o5565j.png" style="
    position: absolute;
"><a href="#3" class="link"></a>
            </div>