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