On Hover Text, On Click Image LightBox

Animations
1

Hi everybody, going a bit crazy on this one so hoping someone can kindly help!

I want to create the following: When you hover over the image, a text shows title and description of the project and when you click, the image becomes bigger (either as a light box or just scale up). I managed to create the text by creating two layers, one with the image and one with text. However, because the text sits on top in doesn’t allow for the image to scale up (because the text layer is on top).

Is there any way to merge both actions? Many thanks!!

2

I would suggest a three-level situation.

  1. Level One: plain image (image A).
  2. Level two is the text widget placed on top of image A. It will need on-hover animations with opacity 0-100 and image B as a trigger.
  3. Level three: a copy of image A with opacity 1 and Lightbox settings enabled.

So basically, since image B is on top of everything, you can click it and it will go full screen (lightbox). And since it is also the trigger for the text, the text will appear over image A.

3

Hello Samus!! Thank you very much for this :slight_smile: I actually had this thought too so I’m happy we came to same conclusion! Just going a bit crazy with duplicating layers, keeping it tidy etc Thank you very much!!

4

Cool! I tested it and it works. I would suggest using groups to help keeping things tidy and more manageable.