I’m new to webflow and i must say it’s one of the best platform to build your site without too much knowledge of coding.
Now to the main part, i’m trying to make a lightbox just like the one at the video tutorial here
http://tutorials.webflow.com/adding-a-lightbox
i want it to be exactly like at the ending of the video, when you mouse over at the image, it displays the transparent effect that says “See more images”.
Can someone give me a detailed step by step guide on how to make it like that?
To display an element on-mouse-over of another element – because that’s actually what it does, wether the displayed element is on top of the mouse-overed one or some place else – like the tutorial video shows:
Create an element (say it’s you thumbnail), create another element of the same size (or both sizes 100%) as a child and give it a color, reduce the opacity and put your desired text in. Give the parent element position:relative and the child position:absolute, fine tune to get one on another. Give a unique class to each, then give the child the property display:none or opacity 0%. Create an interaction saying that on mousover, affect a different element, target the child element, set display:block or opacity:100% depending on your previous choice. Set on-mouse-out to do the opposite.
You could also just give the child element an opacity of 0 and set it’s mousover state to opacity 100%. I usually don’t do this and prefer the first method, because there’s a way to automate it for all other thumbs, by giving the same class to all childs and checking the “limit to nested element” checkbox in the interaction panel.
Cool
Thank you very much
I played with manual position to match one element above the other…It breaks the responsiveness but you can adjust it manual at least.
Really thank you