image block hover colour opacity overlay

https://www.annajonesbridal.co.uk/home-new

Hey, im trying to get an image hover effect of a low opacity block colour (#F9F7F1) and can't seem to achieve it.

squarespace 7.1, fluid engine. 

tried a code below but not working

//blog image hovers//

/* promo section Image Overlay */
.fe-3_17_2_1_1699632349214_26131 .content-fill:after {
    content: "";
    position: absolute;
    background-color: rgba(249, 247, 241, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
.fe-3_17_2_1_1699632349214_26131  .image-block:hover .content-fill:after {
    opacity: 1;
    transition: all 0.3s;
}

1 hour ago, Ziggy said:

You can try this adjustment of your code:

#block-yui_3_17_2_1_1699632349214_26131:after {
    content: "";
    position: absolute;
    background-color: rgba(249, 247, 241, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.5;
    transition: ease-in-out 0.3s;
}
#block-yui_3_17_2_1_1699632349214_26131:hover:after {
    opacity: 1;
    transition: ease-in-out 0.3s;
}

 

i changed one line with the opacity but apart from that it was perfect!!! thank you so much

however haha, its taken away the ability to click on the image which should take you to a different page hmm!

/*promo section image hover Overlay */
#block-yui_3_17_2_1_1699632349214_26131:after {
    content: "";
    position: absolute;
    background-color: rgba(249, 247, 241, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: ease-in-out 0.3s;
}
#block-yui_3_17_2_1_1699632349214_26131:hover:after {
    opacity: 1;
    transition: ease-in-out 0.3s;
}

Try adding this to the code:

pointer-events: none;

3 minutes ago, Ziggy said:

Try adding this to the code:

pointer-events: none;

you're incredible 😭

😭 THANK YOU!

Nice one! Glad that worked!