Rplicate Interaction on Every Lightbox

Design help Animations & Interactions
1

On the CAD Models Page I have created a show/hide on one lightbox. As they are all background images I can’t name them the same so how do I add the animation on image one to the rest? I know there is only 3 at the moment but I have another 50 to add!! Help appreciated

Here is my public share link: https://preview.webflow.com/preview/se-architects?utm_medium=preview_link&utm_source=dashboard&utm_content=se-architects&preview=4c668aec352c18e1ec7061320f78f204&mode=preview
(how to access public share link)

2

I’m not sure whether there is another purpose for these images to be background images apart from being able to overlay the hover div on top of them. The easiest way to go around this would be to use a CMS collection, but I guess you want to use the cheaper plan without CMS, so here’s what I would do:

  1. Reset the background of the Lightbox to transparent. (no background image)
  2. Set the Lightbox display from Block to Flex.
  3. Bring in an Image block into the Lightbox with the image of your choice. (This image has to be below the hover wrapper div.)
  4. Set the Image Fit from Fill to Cover.
  5. Set the Lightbox Position from Static to Relative.
  6. Set the Hover Wrapper Position from Static to Absolute.
  7. Set the Hover Wrapper Width to 100%.
  8. Use the same class on all the other lightboxes and it should work as the interaction targets only child elements of the trigger lightbox.
3

Thank you @witooZ,

Yes in these current times my client is keen to keep costs down. I am using a background image as many of the images I have to use are different sizes and I want them all of the same size and yes I can also use the Div over the top to create the interaction. So I can’t really use an image.

4

The image will be the size of the lightbox container. It basically looks the same as you did it yourself, but it just uses a different method.

5

Thank you @witooZ

I changed it on all three and you are quite right they are all sized correctly and the interaction has followed them, the only thing now is I seem to have a strange strobe effect on the interaction and I can’t seem to effect easing at all? Do you have any idea please? Sorry I am still getting to grips with interactions…

6

Seems like you have changed your settings regarding the trigger. You want to keep the trigger on the Lightbox and have the Show and Hide set to Only children with this class instead of Siblings which you have there right now.

  1. Delete the trigger from Image
  2. Set the trigger on Lightbox link 4
  3. Go into the settings of the Show and Hide animations and set the Affect to Only children with this class.

If you want easing for a smooth transition between two states, you need to have an Opacity animated as the Show/Hide property itself cannot be animated. I would suggest looking at the Webflow university for how to do this kind of animation.

1 Like
7

Brilliant! Thank you so much @witooZ, I really appreciate the time and effort you have made to help me.

Hope all is safe where you are.
Rxz