Replace Image on hover overlay

Hi

Wondered how you can replace an image when hovering over. So another image will be displayed when hovering over.

Cheers! Hanna

Please provide a link to your site so we have something to work with. There's various ways to do this, depending on what element you want to change and how it has been set up.

Thanks Bernard

Here is the link http://www.beautyacademy.no So the three top images under the banner needs to be replaced by another image when hovered over.

:)

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?

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

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

Edited my answer to allow for multiple background images

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

Sorry, I edited it again to target the specific image URLs so you can move the content around on the page without breaking the code.

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"?

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.

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

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/

.imgOverlay
{
   width: 240px;
   height: 240px;
   background: url(img/fish-all.png) no-repeat;
}
.imgOverlay:hover {
   background: url(img/flower.png) no-repeat;
}

Full Source : CSS Image Overlay

Lee