Please help with image links not compatible with CSS coding

Site URL: http://silverstreakstudio.com/films

Hi all, 

Hoping someone cleverer than me can help with an issue I on my website. I have input some CSS code for a variety of image blocks on a page to turn them into animated gifs when you hover over them. I have also set up the images so that you should be able to click on them and it take you through to a different page. This works perfectly for the first 5 images on the page but for some reason the click through doesn't work for the remaining images on the page, even though I the CSS is the same. If I remove the CSS the link works fine.

Have tried a variety of things to no avail, but I am only just learning my way with CSS so would be grateful for someone with some more coding experience if you have any ideas..... This is the CSS code for two of the blocks. For the first one, the click-link works, for the second, it doesn't. The rest have the same code with the block ID and gif reference changed. PW for site is Silverstreak

Thanks in advance!

// Creating the Dinaka gif image //
  #block-yui_3_17_2_1_1633440593043_86459::after {
  background-image: url('https://static1.squarespace.com/static/613f622f33629f25cf7a3a4d/t/615f368be4b9b10aead57e42/1633629851119/Dinaka1.gif');
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
//Hover mode
#block-yui_3_17_2_1_1633440593043_86459:hover img {
  opacity: 0;
}
#block-yui_3_17_2_1_1633440593043_86459:hover::after {
  opacity: 1;
}

// Creating the Enclave gif image //
 #block-yui_3_17_2_1_1633440593043_125562::after {
  background-image: url('https://static1.squarespace.com/static/613f622f33629f25cf7a3a4d/t/616001526baf2c4df9c70b86/1633681761768/The+Enclave.gif');
  background-position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  height: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
//Hover mode
#block-yui_3_17_2_1_1633440593043_125562:hover img {
  opacity: 0;
}
#block-yui_3_17_2_1_1633440593043_125562:hover::after {
  opacity: 1;
}

Hi,

Hi, 

Thanks for taking the time to have a look.

Password is Silverstreak 

I see you solved with this code

div#page-614219eb75c29b74fbd67ae3 .image-block:after {
    pointer-events: none;
}

Yes, thanks for your help - much appreciated.