Streaming live at 10am (PST)

Image Swapping on Mouseover


#1

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!


#2

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.


#3

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.


#4

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!


#5

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.


#6

Yea like @Revolution said, we can be of more help with a link smile
http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/


#8

Here you go

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

Thank you, by the way!


#9

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!


#10

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


#11

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!!!


#12

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


#13

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


#14

Haha no worries, sounds good!
Cheers.


#15

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


#16

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


#17

That's cool @jaidenraleach, neat trick wink


#18

thanks @cyberdave!



#19

glad it worked @Kirbie_Earley!



#20