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添加到疊加層。這將使它無法捕捉到點擊，從而讓它落到它下面的元素上。