CSS - 带链接和文本的图像叠加

Question

我一直在尝试整天得到一个图像叠加，以保留url链接。

我有一系列圆形图像是图像库的一部分，我添加了一个覆盖图并将文本放置在我想要的位置，但是现在覆盖图将去除图像的url链接。

我正在使用一个方形空间模板，因此我无法移动由CMS呈现的任何块。这个文本就在这里：“.image-slide-title”图像在这里：“.thumb-image .loaded”，链接有这些类：“image-slide-anchor.content-fit”

这是链接到什么我的工作：https://cesare-asaro.squarespace.com/work

这是我迄今为止这个特定部分的代码：

#portfolio { 
 
     \t background-repeat: repeat; 
 
    \t background-color: rgba(239,93,85,1); 
 
     .margin-wrapper:hover { //for porfolio hovers 
 
     position: relative; 
 
     } 
 
     .margin-wrapper:hover a:after { 
 
    \t 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); 
 
    \t opacity: 0; 
 
     transform: scale(1.002) 
 
     margin: 0 -50% 0 0; 
 
     transition: all .7s; 
 
     -webkit-transition: all .7s; 
 
     } 
 
     .sqs-gallery-container{ 
 
     \t overflow: visible; 
 
     } 
 
    .margin-wrapper:hover .image-slide-title{ 
 
     opacity:1; 
 
     color: rgba(239,93,85,1); 
 
     -webkit-transition: all .7s; 
 
     } 
 
     .image-slide-title{ 
 
     \t font-size: 50px; 
 
     text-transform: uppercase; 
 
     line-height: 100%; 
 
     \t opacity:0; 
 
     \t position: absolute; 
 
     \t 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添加到叠加层。这将使它无法捕捉到点击，从而让它落到它下面的元素上。