Jump to content

Please help with image links not compatible with CSS coding

Recommended Posts

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

 

Link to comment
  • Replies 4
  • Views 360
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.