Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
hannamathilde1570047972

Replace Image on hover overlay

Question

13 answers to this question

Recommended Posts

  • 0

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?

Share this post


Link to post
  • 1

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

Edited by ghostcat

Share this post


Link to post
  • 0

Hey ghostcat, cheers for getting back to me. I'm wondering about the code you provided, each image is going to have another different image when i hover over. Same size and eveyrthing, just different text and image. What do I have to write with the code you provided? Hanna

Share this post


Link to post
  • 0

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

Edited by dnissan

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!

Share this post


Link to post
  • 0

Hey, I'm having a similar problem. Three images that I would like changed to other images on hover. Tried your code in custom css and didn't work for some reason. Does something have to go in the quotes of "content"?

Share this post


Link to post
  • 0

You don't need anything in the content string, but you need to change our the css selector to match your images's classes.


.image-block-wrapper:hover img.thumb-image[data-image="IMAGE_URL']

was for hannamathilde's site, and probably doesn't apply to yours.

Share this post


Link to post
  • 1

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

Edited by LFortin

Share this post


Link to post
  • 0

Thanks for getting back so quickly. Still having problems. Here's a link to the site. Any further help you can provide would be amazing.http://www.estate-litigators.com/media-centre/

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...