Change Image On Hover with Clickthrough

Site URL: http://underthelaureltree.squarespace.com

Hello everyone,

I've used some code I found online to create a hover effect that changes one image to another in an image block. I used the css version, rather than the "onmouseover" version, as I wanted a smooth fade transition (which I read couldn't be done with the "onmouseover" version of the code).

Now, though, when I use the Squarespace editor to make the image block a link, it doesn't work- presumably cancelled out by the rollover effect.

Is there any this I can add to the code below to make the image a clickthough link to another page on the site?

I've seen lots of versions using "a/ref", but, as i'm using image blocks, and not code blocks, I don't know how to make this work- where it would go, etc.

This is the code i'm using- there may be bits I don't need and could be removed- I just played with it until it did what I needed and this is what I ended up with!

I also have four images with the same effect on the same page, and need them all to behave the same way and link to different pages- i've used this code 4 times (with different block ids and different image urls), is this correct, or is there a way to condense it?

#image block id {

  figure:before {
    content:'';
  }
  &:hover  figure:before{
    content: '';
  }
  figure:after{
    background-image: url(custom css image url);
  }
  figure:before {
    content:'';
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
  }
  figure:after{
    content: '';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    opacity:0;
    transition: opacity .5s ease;
  }
  &:hover figure:after{
    opacity:1;
  }

I have also tried this code:

/* hide image on hover */
  div#block-id a:hover img {
    opacity: 0;

}
  div#block-id a img {
    transition: all ease-in-out 0.9s;
    opacity: 1;
  }
/* Set new image */
div#block-id a {
    background-image: url(custom image url);
    background-size: cover;
    display: block;
}

This code works, too, and doesn't seem to stop the link working (yay!)- however, it is resizing the images... They are being stretched hugely, then being cropped- so I can only see part of them (I hope that makes sense!)

Thanks so much for any help 🙂

ryan

Hi. What is password?

Hi tuan,

The password is: pineapple

On the front page, the top image uses the second bit of code (where it works as a link, but is cropping the image), and the second lot of images (four in total) use the first bit of code- the rollover works perfectly, but they aren't links.

Thank you so much for having a look 🙂

16 hours ago, abigailryan said:

Hi tuan,

The password is: pineapple

On the front page, the top image uses the second bit of code (where it works as a link, but is cropping the image), and the second lot of images (four in total) use the first bit of code- the rollover works perfectly, but they aren't links.

Thank you so much for having a look 🙂

 

add pointer-events: none; to this code to enable clickable

figure:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

This worked perfectly- thank you so much!