Jump to content

Replace Image on hover overlay

Recommended Posts

  • Replies 13
  • Created
  • Last Reply

To do this, you'll need to add some javascript to your site to target the image so it can be changed when hovered over. I'll see if I can help you with it tomorrow, unless someone else can think of a better way to do it.

Just to check, what do you want to replace it with? Is it a variation of the same image, or a totally different image?

Link to comment

You can do this with just Custom CSS:

EDIT:I realized it's probably better to just target the actual image urls as opposed to their row:


.image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace0be4b05d27e545eaf5/1427820045453/flagship.jpg"]{
   content:"";
   display:block;
   background-size:cover;
   /* FIRST IMAGE*/
   background: url(YOUR_IMAGE_URL) no-repeat top left;
}
.image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace62e4b01144c47b8ffd/1427820132658/78.jpg"]{
   content:"";
   display:block;
   background-size:cover;
   /* SECOND IMAGE*/
   background: url(YOUR_IMAGE_URL) no-repeat top left;
}
.image-block-wrapper:hover img.thumb-image[data-image="http://static1.squarespace.com/static/533fb429e4b0aa2aaadd87ca/t/551ace30e4b01144c47b8e4d/1427820082298/"]{
   content:"";
   display:block;
   background-size:cover;
   /* THIRD IMAGE*/
   background: url(YOUR_IMAGE_URL) no-repeat top left;
}

Link to comment
  • 3 weeks later...

Bernard, I'm looking for a similar answer, looking forward to your response. As far as I can tell, she's wanting a different picture to appear - but she'll clarify. https://answers.squarespace.com/questions/77492/text-to-appear-on-hover-of-image

Hello! I'm a web designer at Piila Web Design. Check us out - http://www.piila.ca, our website will be live end of Summer 2016. This Squarespace Answers account was made a while ago using my personal email address. My business address is davidnissan@piila.ca. Send me an email to either one - let's chat. What makes us different is our ridiculously low prices compared to the big wigs, while at the same time providing high-quality content. We're super honest about what we can offer and what we're charging you for, so you know exactly what to expect and where your dollar is going towards. We also provide small, piecemeal solutions. For example, if you just want that one customization on your website, it could cost as little as just 10 bucks. Nice. Cheers!

Link to comment
  • 2 months later...

You can do this by creating a div tag in a code block and changing the background with CSS

    #sample{  height:500px;  background-image:url("yourimageurl");   background-size: cover;  background-repeat: no-repeat;  background-position:center;  transition:.3s;}

    #sample:hover{  background-image:url("yourimageurl");  background-size: cover;  background-repeat: no-repeat;  background-position:center;  transition:.3s;}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.