Jump to content

Change Image On Hover with Clickthrough

Recommended Posts

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

Edited by abigailryan
edited to add more code i've tried!
Link to comment
  • Replies 4
  • Views 592
  • Created
  • Last Reply

Top Posters In This Topic

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 🙂

 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.