Updated CSS For Hover Effect on Poster Images

I had originally asked this question years ago (here):

https://forum.squarespace.com/topic/79514-css-for-rollover-effect-on-image-block-poster/#comment-121074

The selected answer worked really well for awhile. Although it appears the coding has changed and this css blocks the link from being selected. I have tried altering the css any way possible, but I can't seem to target the issue correctly. I had originally thought the z-index may be the issue but targeting the link and changing it's z-index didn't fix the issue either. Any help would be greatly appreciated!

@bcrealty Can you share link to your site?

7 hours ago, tuanphan said:

@bcrealty Can you share link to your site?

bradencooley.com/buy

I think I've found the answer.  Grayscale hover-over on posters with links only (without breaking the link!)

NB - I am not a developer so this might be nonsense.  The key was identifying the correct 'class-id' (?) - is that the correct term?  I told you I don't know what I'm doing.  This seems to work anyway.

.sqs-block-image-link img {
  filter: grayscale(0%);
  transition: all .5s;
}

.sqs-block-image-link:hover img {
  filter: grayscale(30%);
  transform: scale(1.2);
}

If any of you can get back to me with how I now might darken the opacity instead of using greyscale, that'd be perfect!

I've just found the 'brightness' filter too, which darkens the poster image on hover.  (This was the function I was actually after, contrary to me asking for 'opacity'!)

*The class selector seems to be what you were after though.

.sqs-block-image-link img {
  filter: brightness(100%);
  transition: all .4s;
}

.sqs-block-image-link:hover img {
  filter: brightness(70%);
  transform: scale(1.2);
}