poster image hover to hide title

Hi
I use the Five template and added a few poster images to one page. The effect I would like is the poster with title+subtitle to be a little darker and on hovering over the image turning normal bright and the title+subtitle disappears. The image should also function as a link.

I managed to setup a hover effect, but I have two problems:
1. Due to the brightness filter on the not hovered image, the title+subtitle are also darker. I would like them to be normal white.
2. Upon hovering the filter clears, but title+subtitle don't vanish.

These are my CSS settings, yet I don't know squarespace's tags:

.sqs-block-image:hover {font-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.1); brightness: 100%; transition: .6s;}
.sqs-block-image:not(:hover) {filter: brightness(0.6); transition: .3s;}
.sqs-block-image-link {z-index: 1;}
.sqs-block-title:hover {color: rgba(0, 0, 0, 0.1);}
.sqs-block-title:not(:hover) {z-index: 1;}

On .sqs-block-image:hover font-color or color did not do anything. .sqs-block-title also did nothing.
Any idea what could do the trick? The last resort would be to create a complete new code element, coming at the expense of ease of use.
Thank you all.

Someone helped me solve it:

.sqs-block-image:hover { brightness: 100%; transition: .6s; cursor: pointer;}
.sqs-block-image:not(:hover) img { filter: brightness(0.3); transition: .3s;}
.sqs-block-image:hover .image-card-wrapper { display:none;}

Hello,

Can you exclude certain image designs? 

I only want this effect on 'Posters"

4 hours ago, oskarfishwick said:

Hello,

Can you exclude certain image designs? 

I only want this effect on 'Posters"

 

 

If you share link to page where you insert Poster, I can take a look