Streaming live at 10am (PST)

Hover interaction on lightbox


#1

Hello,

I have been playing around with webflow for a little under a week and trying to wrap my head around transitions. All of the videos and tutorials as well as the sample pages are very helpful. What I am trying to figure out is how to make text slide from inside an image on hover. To cross the image but be contained within it. This is probably a simple question but I can't seem to get it after trying for a few hours. My text always starts outside

https://preview.webflow.com/preview/jeremy-lerouxs-trendy-site?preview=d97e3f060fe55349e2e52f9307644930

Thanks for all the great work. Webflow if exactly I have been looking for. A way to design without spending hours on code. I can see how this will be a huge time saver when I get profficient with it.

Also a second question. IS there a good way of making sure an item nests inside the right item. I find it difficult to target the specific item to nest in and if for instance I want to place an overlay in a lighbox it wants to attach itself to the column when I cut and paste. This has some unintended consequences and is a pain fix.

thank you
Jeremy


#2

Make a div as a container and give it position:relative and overflow:hidden, place your image in it, place your text and give the text position:absolute and place it in the position you want it AFTER the interaction runs. Give a class like "slidingtext" to the text. Now select the text and go to transform and make it slide a certain amount of pixels to make it disappear outside the boundaries of the div.

Now select the div, create an interaction, select onHover trigger, in the Affect other element type in the name of the text "slidingtext". Add a step and make it move the same amount of pixels in the other direction to make it show up. Adjust time and easing mode.

you can cut (cmd+x) an item, select another, paste it and it will be pasted inside. And also, use and abuse of the Navigator tab. If you're agile, you can slide things from the Add panel right in the Navigator panel (sometimes you have to avoid hovering the designer page on the way so the navigator tab stays in the same state.


#3

thanks Vincent, wrapping my head around all the positioning absolute ect and pertaining it to the specific div and object makes all the difference. I as finding the same issue writing from scratch too.

jeremy


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.