Streaming live at 10am (PST)

Overlay dynamic text on a dynamic list item?


#1

Hello! Wanted to know if it was possible to overlay dynamic text (from the CMS) consistently on top of an image in a dynamic list? I'd like to replicate something like you see at the very bottom of this page on Fuzzco's site. Is it possible?

http://fuzzco.com/work/obey/

Thanks!
cd


Here is my public share link: LINK
(how to access public share link)


#2

Hello @cwndutilh

Do you mean previous and next projects or just overlay functionality?


#3

hi @sabanna-- looking to incorporate previous/next functionality too, but i'm basically looking to be able to add text from my project names (title, description) over the photos.


#4

Well, then...

First you will want to use "layered" structure in dynamic item design

1) Box - div which will contain all layers, position relative. Should have some fixed size (px or vw/vh)
2) Image - inside the box, position: absolute, align: full. Connected to dynamic field with project image
3) Overlay - div which will contain text, sits inside the box, siblings to image, but z-index higher than image, position: absolute, (you may set semi-transparent background color if you want)
4) Project name - text-block, connected to the dynamic field (project name field), sits inside the overlay, style as you wish.
5) If you want static text inside the box, add one more text block or header with z-index higher than previous layers.

Give initial appearance to these elements:
Image - opacity:0%
Overlay - opacity: 0%
Dynamic text (project name) - move down 30px (as example)

Next step - creating interaction for Box element (will contain 3 animations)
1st animation
Trigger - Hover
Affect different elements - here goes image class
Limit to nested elements
Hover over- opacity:100%
Hover out - opacity: 0%

2nd animation
Trigger - Hover
Affect different elements - here goes overlay class
Limit to nested elements
Hover over- opacity:100%
Hover out - opacity: 0%

3rd animation
Trigger - Hover
Affect different elements - here goes text block class
Limit to nested elements
Hover over- opacity:100%, move to origin
Hover out - opacity: 0%, move down 30px (as examole)

And plus some Webflow magic - you make it only for one dynamic item :smile: and it appears on all :wink:

Regards,
Anna


#5

Thank you so much!! Amazing work. It took me a while to get it (applied the interaction to each of the three features instead of applying them to the box and THEN to the individual features) but it's looking good now! www.wearecomposite.co in the Work section.


#6

:smile: Looks good, @cwndutilh !
I am sorry I didn't add images or video to my answer, was posting from the phone :confused: Maybe images would make your "journey" faster. But from another side: you learned a lot :wink:


#7

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