Cesare Asaro
Cesare Asaro

Reputation: 5

How can I retain img link functionality while using an overlay?

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.

I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.

The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit

This is the page I'm working on: https://cesare-asaro.squarespace.com/work

And this is the code that I have so far for this particular section:

#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;
}

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).

Upvotes: 0

Views: 1540

Answers (1)

samanime
samanime

Reputation: 26557

Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.

Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.

Upvotes: 2

Related Questions