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を追加するだけです。これはクリックをキャプチャしないようにし、その下の要素に落ちるようにします。