我如何保留img链接功能，而使用覆盖

Question

我有一系列圆形图像，它们是图片库的一部分。我已经添加了一个覆盖，并将文本定位在我想要的位置，但现在覆盖正在删除指向图像的URL链接，我试图让覆盖保留链接。

我正在使用一个SquareSpace模板，所以我不能移动任何块，因为它们是由CMS渲染的。

文本在这里:.image-slide-title，图像在这里:.thumb-image .loaded，链接有这些类:image-slide-anchor .content-fit

这是我正在工作的页面:https://cesare-asaro.squarespace.com/work

这是目前为止我为这个特定部分写的代码:

#portfolio  {
        background-repeat: repeat;
        background-color: rgba(239,93,85,1); 
}
.margin-wrapper:hover { //for portfolio hovers
        position: relative;
}  
.margin-wrapper:hover a:after {
        opacity:.8;
}
.margin-wrapper a:after {
        border-radius: 50%;
        content: 'A';
        position: absolute;
        width: 100%; height:100%;
        top:0; left:0;
        background:rgba(255,255,255,0.8);
        opacity: 0;
        transform: scale(1.002)
        margin: 0 -50% 0 0;
        transition: all .7s;
        -webkit-transition: all .7s; 
}
.sqs-gallery-container{
        overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
        opacity:1;
        color: rgba(239,93,85,1);
        -webkit-transition: all .7s;
}
.image-slide-title{  
        font-size: 50px;
        text-transform: uppercase;
        line-height: 100%;
        opacity:0;
        position: absolute;
        margin: -100%  0;
        height:100%;
        width: 100;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
}

我对不同的方法感到非常困惑，有些使用JS，有些没有，以及:after和:hover的多种用途(我只是对代码进行了一些修补)。

Answer 1

你的叠加可能会阻止点击事件到它下面的东西，阻止它触发链接。

只是添加pointer-events: none覆盖。这将使它不捕获点击，允许它落在它下面的元素。