Image Swapping on Mouseover

Here is what I’d like to do - I have a black and white image and I want to have the color version of the image show on hover. I saw a similar topic from a year ago and it looked as if the end result was that it didn’t work - and that was for a linked image.

Here is what I have tried so far…

  1. Created section - created container - added 4 columns - put a div block inside each column - in there is an H2 title and an image below…(all have classes)
  2. Placed my black and white image in as the image, with the color version as the background - making the black/white one 0% opacity on hover - this makes both 0% so that’s out.

In the hover state, you can’t add a different image - you can only replace the image that is already there, replacing it in the pre-hover state as well.

I saw a video on placing a colored text box in to show on hover - and they add a div block on top of the other one. I played around with that and when I added the second image, it pushed it around so that one was visually on top of another - so 2 rows of images, not one on top of the other so you’d see 1 row.

The second problem I am having is that I cannot get rid of the grey placeholder block that is there now - placeholder.svg. How do I get rid of that? Even IF I put the background in as the color image, this dumb grey block is covering it up - there is no little trash can next to that sucker to get rid of it. If I delete, it deletes the whole image.

All help appreciated. I watched many of the videos - all of the beginner ones and probably half of the “here’s how we created webflow” and a few of the others as well. They’re great, but not helpful so far - a link to one that would show this would be fine.

Thanks in advance!

did you class the bw image ?

If you did… you should be able to change opacity of the bw image - to show the color image below it.

the background properties is where this placeholder image is set. you can delete it from there as well.

I did class the BW image - but when you change the opacity of that, it changes the opacity of its background too, which is what I was trying to say but perhaps didn’t articulate very well.

When I look at the background - it shows “none” for image. I don’t see “Placeholder.svg” in the background area. I only see it if I go to “settings” - and then there is no way to do anything but replace it with a real image.

Hi @Kirbie_Earley, Not 100% sure, but it sounds like this demo may be helpful:

Demo: https://webflow.com/website/Demo-Kit
Page Title: Fade Overlay on Hover

I hope this helps!

as for opacity… I think you might be changing the wrong opacity.

Review this post - look for a response from @jaidenraleach

See if that answers your question

as for the Placeholder image… post a public link… someone will take a look and try to find it.

Yea like @Revolution said, we can be of more help with a link :slight_smile:

Here you go

https://preview.webflow.com/preview/jump-fish?preview=52f57d13a2f56608242e231a51ed3332

Thank you, by the way!

I don’t mean to sound ungrateful - but I still don’t know how to get rid of the image placeholders. If I can, I’ll just put text over it…but until I can get rid of the placeholder image block thingies, I can’t do much.

Thanks!

So just had a minute to read thoroughly your post, not sure why this hasn’t been suggested yet by the others-- this is a super simple way to accomplish what you want I think:
http://quick.as/ozXmuze7 :slight_smile:

Basically the video shows how to:
-add two background images and make the black and white one the last image you add
-shut off the black and white background image visibilty on hover
-tell it to smoothly transition the difference between the two images

also notifying @revolution and @thewonglv so they can see what they think of this method.

4 Likes

WOW that looks like what I want to do! That’s great. NOW, if I can just get rid of the placeholder.svg image I’ll be all set. I didn’t think to put two background images in. That’s an awesome solution.

Thank you!!!

Glad it will work! - there wont be a placeholder svg if you use a div element instead of an actual image block as shown in the video :wink:

OH I didn’t even pick up on that - midnight here. I’ll rewatch it tomorrow and get it right. Thanks again!

Haha no worries, sounds good!
Cheers.

Digging it! I’ll add it to the demo kit!

Edit: Added it to demo kit
Demo: https://webflow.com/website/Demo-Kit
Page Title: Swap Background Image on Hover

2 Likes

It worked GREAT! It did just what I needed it to do! Thank you so much!

1 Like

That’s cool @jaidenraleach, neat trick :wink:

1 Like

thanks @cyberdave!


glad it worked @Kirbie_Earley!