Fading one image in and the 2nd image out with a single click

Hey! So I have div block A and div block B. When I click div block A, I want it to fade in image A. But now when I click div B, I want image A to fade out and image B to fade in at the same position. Need it to also work vice versa. Is that possible?

You can probably achieve that with interactions: Weblow interactions

Yes, I know it could be achieved with interactions. What I’m asking is how. I have not figured it out. I need picture A to fade out and picture B to fade in with a single click on div block B.

Can you share your read-only link so that we can see where you’re stuck?

assuming that one is clicking on image A, you will use a single div that holds the two images. Set this div to “relative”. Images A and B will be set to “absolute”. Image A will have a higher z-index so that it’s overlapping image B.

Apply a click interaction to the div holding the two images. (side note, you can apply the pointer icon to this div to show that it’s clickable)
The click interaction will tell Image A to change from an opacity of 100 to an opacity of 0, revealing Image B underneath.

All of the images need to be at 0 opacity before user clicks the button. So user needs to click Button A to view Image A, Button B to view Image B and so on. (there are total of 6 images and 6 buttons A-F, I just use A and B for simplification).

User can choose the order he views the images. So let’s say user clicks the buttons in this order : B, D, A, B, C, A. Each button click needs to show the corresponding image while hiding the previous image.

Appreciate the help!

I think writing custom JS for such interaction would be a best idea. But there still a way to do it with Webflow Interaction.

So to explain the interaction, it should display the target image and hide other images if it is visible.

Beside the layout build I’m just explaining the interaction process.

So one trick you should do here is to target all the images with it’s class name. You can individually add them but it’s a lot more work.

So let’s say class name for those images is target-image then you have additional class name for each images like image-1, image-2… image-6

Now create the interaction for each button (your DIV block), let’s name the first one Show Image 1. You already know how to hide one particular image but now you just have to add another interaction to hide all other images. This can be little tricky because it almost feel buggy.

What you need to do is:

  • select one of the image (other image beside image-1)
  • add interaction for opacity
  • now at the bottom where class field is, it should appear with a combo class like [target-image] [image-2], click to edit and type target-image and select that. It should be [target-image] only now

This way you can hide any other active image and fade in image-1. Just keep in mind, first interaction should be to hide all the images and then show image-1 interaction should come.

Similarly duplicate the interaction for other buttons and change the target of fade in interaction.

I hope I’ve been able to describe it properly, let me know if there will be any questions.

These screenshots might help, I’ve applied just opacity but I guess you will get the idea.

Thank you! This worked!

1 Like

Glad to help.

Now it has worked, I request you to mark it as Solved so this post gets closed.

Seems like a tab component could have achieved this. Same function and it’s prebuilt. Although you didn’t share your design so not sure.

1 Like