Changing an image block to another image on hover or rollover?

Hello,

I would like to change the thumbnails of my portfolio to a completely different image on the hover. It will link out to a site within my website, and I do not want any transitions. I don't know how to write the CSS (and exactly what/how I should label the thing I am changing).. I know I have to change each individual element and that is fine with me, but I also want the hover image to retain the size of the the image it's replacing.

my website: https://sorina-vaziri-vhqm.squarespace.com/

image I would like the rotating jersey gif to change to: http://i58.tinypic.com/2vnqq1g.jpg

If anyone could help me with this I would very much appreciate it :) I can't seem to find the solution for my specific problem

I can help you do this. Just bookmarking for later.

Thank you so much Bernard!

Hi Sorvaziri, I have a similar question - were you able to solve your problem? If so how?Thanks,Anik

No no one has answered yet :/ I will keep you posted

Ah sorry, I forgot about this. I'll help you fix this later today. If I don't, post back here and rebuke me and I'll jump to action! :)

I had a quick look. I was hoping to be able to do this with a css trick. I can't find a way to do it with CSS, so it's going to have to be done with javascript. Apologies again, but I'm too tired to write the javascript at the moment. I'll get back to this tomorrow.

I couldn't help myself so I had a go at it. ;) Logically the javascript I wrote works fine, but there's a problem with the mouse hover interacting with the animated gif. As the gif cycles through, the "hover" deactivates until you move the mouse again. I'm not sure that the hover will be able to work with the gif. And the gif effects the hover of all it's parent elements too, so targeting one of the container elements of the image doesn't work either. I'm at a bit of a loss as to what to try next.

Ok, I've worked out a javascript solution. It still needs a little tweaking to get the formatting of the new image right, but it's late and I'll have to get back to that tomorrow. Instead of using a CSS "hover" selector, it uses a javascript "onmouseover" and "onmouseout" instead. That overcomes the problem with the hover selector not interacting with the animated gif properly.

So, you need to stick this code into the header of that specific page (page settings->advanced->page header code injection). From past experience, it might not work in the header. If it doesn't we'll need to stick it in the site wide footer injection point. To find that go to "settings" in the left hand edit menu, "advanced", "code injection" and then stick it in the "footer" section. Here's the code:

<script>
   (function() {
 var imgs = document.getElementsByTagName('img');

 for (var i = 0, n = imgs.length; i < n; i++)
 {
   if (imgs[i].getAttribute("data-image-id") == "5502fcb0e4b03593df0d8ed2")
   {
     imgs[i].setAttribute("id", "targetIMG");
     imgs[i].addEventListener("mouseover", newImage);
     imgs[i].addEventListener("mouseout", oldImage);
     break;
   }
 }

})();

function newImage() {
 var img = document.getElementById("targetIMG");  
 img.getAttributeNode("src").value = "http://oi58.tinypic.com/2vnqq1g.jpg";
}

function oldImage() {
 var img = document.getElementById("targetIMG");  
 img.getAttributeNode("src").value = "https://static1.squarespace.com/static/54f25f11e4b02d9040dcf4b4/t/5502fcb0e4b03593df0d8ed2/1426259135697/BlackTie?format=1000w";
}
</script>

Note, if you change any of these images, you'll need to directly change this code to match the new image details.

Let me know how that goes.

Hi Bernard,

first of all THANK YOU SO MUCH :) I really really appreciate it! It worked when I injected it in the footer, not the header but it stretched (horizontally) my hover image. Is there anyway I could retain the size of the image?

best and have a great weekend,

Sorina

Yeah, I'll have a look at the formatting now. Not sure if you realise, but the original animated gif is too big for the container. In the real image his hands aren't cut off, but on your site they are. Both images are being height matched to the height set in your design and that's causing the replacement image to stretch horizontally. In other words, the ratio of the image container on your site doesn't match the ratio of the images being put in there. Anyway, I'll have a look and see what I can do.

Ok, I changed the aspect ratio of the replacement image to match the aspect ratio of the original gif, and it works fine. Of course, the original gif is still being cropped, so if you want to fix that you'll have to add some white space around the top and bottom of it to make it's aspect ratio match that of the img container on your website. At which point we'll need to change the aspect ratio of the replacement image again. :)

cont. below:

cont from above:

Anyway, try replacing

'http://oi58.tinypic.com/2vnqq1g.jpg' in the code above with 'https://www.dropbox.com/s/dw6q5m6sj8urzh8/2vnqq1g.jpg?raw=1'

and you can see the result. That's a link to the resized file on my dropbox. I'll leave that link live for a day or two, but after that I will delete it. You can either steal that image from my dropbox, or create your own so that it matches the image ratio of 700:709 (width:height).

thanks bernard, it worked :)

Hi Bernard,First of all, thanks so much. Your script works GREAT. Is there a way to use this for a series of images? Like for a portfolio? The page I'm working on is: https://jeanette-illidge-design.squarespace.com/config#/pages|/portfolio. I got it to work on the first image but when I tried for the second... nope. LOL. My website is a MESS right now, I'm in the process of transferring all my info over from one template to another, re-formatting, etc., so please forgive the craziness. Any help you could lend would be much appreciated!

Hi Bernard,First of all, thanks so much. Your script works GREAT. Is there a way to use this for a series of images? Like for a portfolio? The page I'm working on is: https://jeanette-illidge-design.squarespace.com/config#/pages|/portfolio. I got it to work on the first image but when I tried for the second... nope. LOL. My website is a MESS right now, I'm in the process of transferring all my info over from one template to another, re-formatting, etc., so please forgive the craziness. Any help you could lend would be much appreciated!

I'm not 100% sure of what your question is. You can change any image you want with a hover/rollover effect. You just need to target each image. If you want each image to have the exact same hover effect, then you could probably write a javascript routine to do that.

One thing to remember about my answer above... It uses javascript because the orginal image to be replaced for the OP was an animated gif. If you just have a static image, then it's best to use CSS for the hover effect. I, and others, can help you with that too. It's much easier with CSS than with javascript.

Bernard, you are a true boss. This is great! I have only made it work for the first GIF on my site, but people like you make fiddling around with code that much easier! Thank you!

Bernard, you are a true boss. This is great! I have only made it work for the first GIF on my site, but people like you make fiddling around with code that much easier! Thank you!

Cheers mate. Glad to help! :)

Hi Bernard! You're awesome. I'm trying to do what you describe above: have my grid gallery images change to new images on hover with CSS. Could you please share this easier method you mentioned? It's for www.killinit.in/copywriting. Going to have the images change from b&w to color images of the exact same size.

I'm also new to this, so am a bit confused about how to store the images. Should I put them up somewhere like dropbox, or is it better to host them on my site with an unlisted gallery?

Thanks so much!

Hi Bernard,

I've got two static images I'd like to use the rollover feature with. I know you said its better (and easier) to use CSS for the hover effect. Can you talk me through doing it that way?

I e­­­arn 2­­­5 do­­­llars e­­­very 3­­­0 mi­­­nut­­­es. Wo­­­rk f­­­or just fe­­­w ho­­­urs a­­­nd ha­­­ve l­­­ong­­­er ti­­­me wi­­­th fr­­­iend­­­s an­­­d f­­­ami­­­ly. ­­­for more details check the link below

www.pay-buzz.com

Hi Bernard, I am looking for the answer to the exact same question as sildog. I'm traviscraw.com and looking for the same roll over effect in on gallery images using css. Would really appreciate the help.

Hi, At first thank you for the information and sorry for my english.

I want to change all the thumbnails in the covers of my galleries. I want change from image to gif on mouse over.

I need some help because i dont know where put the link of my image and the link of my gif. And i dont know where copy your code to change the thumbnails.

Thank you so much.