How can I retain img link functionality while using an overlay?
<p>I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.</p>
<p>I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.</p>
<p>The text is in this here: <code>.image-slide-title</code>, and the image is here: <code>.thumb-image .loaded</code>, and the link has these classes: <code>image-slide-anchor .content-fit</code></p>
<p>This is the page I'm working on: <a href="https://cesare-asaro.squarespace.com/work" rel="nofollow noreferrer">https://cesare-asaro.squarespace.com/work</a></p>
<p>And this is the code that I have so far for this particular section:</p>
<pre class="lang-css prettyprint-override"><code>#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;
}
</code></pre>

<p>I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).</p>