Lightbox Thumbnail Hover Interaction

Hello!
I am currently creating my first website. Everything has gone smoothly until now. My client has requested a section were his work would be shown. so i created columns and through in there lightboxes, which work fine. the request was to be able to hover over the lightbox and a color with oppacity and text would apear. i tried looking at the turorial and i saw the one that a div block is used. but not on a lightbox. going through the webflow site i saw an article on the lightbox with has as an example exaclty what i want to do! http://help.webflow.com/lightbox-overview click on the example and see what i mean!!! Can anybody help me???

hi @athina_tzan, here is an example lightbox with hover, I just have the lightbox there, so it is easy to see how it was made:

https://webflow.com/design/example-lightbox-hover?preview=bb9f5017d6a77f61ec013509c21dd4f0

and the published site:

http://example-lightbox-hover.webflow.com/

You will want to create your lightbox structure, just like the example smile You can also use a linkbox with image inside that in the image overlay if you want smile I hope this helps smile

Cheers, Dave

@cyberdave Thank you very much for your help. While you solved my problem another one came up and I was wondering if you could help again. I am working with interactions. i want to click the button and a text box would appear. I serached to tutorial and I found it. http://tutorials.webflow.com/click-to-show-hide on 1:52 it shows that you have to set the height at 0, and the whole thing would dissapear. when i do it the text box closes but the actual text remains in the same position. Any ideas??? I am adding my publick link so you can see what i am talking about. https://webflow.com/design/aaaaa12?preview=ad51bdd1261fd6164f07711201f21294 it is on section:profile new, Con_Profile_B, Column_profile, Christina.
Thank again for you help

Hello @athina_tzan, thanks for your message. Try to place your text that you’re going to be showing inside of another div and apply the interaction to the div instead of to the paragraph element. Try that and see if that fixes the issue for you :slight_smile: cheers, dave

@cyberdave Hello again!!! nope couldn’t be able to do it! would be easy for you if you could do in a blank page and send to me so i can seethe the navigator order because that where i am doing it wrong i think. thanks again fro you time

Hi @athina_tzan, ok, here is some step by step:

a. Select the christina column, give it following settings:

b. Set an interaction on the bio_christina element, as pictured:

c. Select your wrap div element and set an interaction (the one you named ‘first’ and set that to initial appearance of display none

Also set your wrap div css properties as shown below:

d. Remove the interaction that sets display none on the christina paragraph text element that is inside of the christina_div elmement. You have now set this on the wrap_div, so no need to have it twice. Save your change and then preview your site and see if the behaviour works as you expect, and if not, let me know and I will look to see if you have any other settings you need.

Cheers, Dave

@cyberdave You are a life saver with the overflow setting it saved me!!! although when i put it to preview mode and i press the button nothing happens. inside the interaction panels it works perfectly. What have I done??? https://webflow.com/design/aaaaa12?preview=ad51bdd1261fd6164f07711201f21294

@cyberdave I figured it out!!! thank you so much! i have been trying to do this interaction for the past ten hours straight!!! Thank u

1 Like

Great @athina_tzan, I am happy you got it working :smile: Cheers ! :smile:

Hi

You probably just answered the question I had, but the link to the example lightbox sample you made does not work. Can you fix it? Much appriciated.

Thanks

Fizounet, Toronto

Oops, thanks for letting me know @fizounet, I was doing some cleaning of my sites in my dashboard and I removed that one.

I have recreated it though, and have updated the original links. Thanks again for pointing this out.

Cheers, Dave

The link is not working to show how this was done?