Streaming live at 10am (PST)

Dynamic collection list Hover Text reveal


#1

I recently fixed a bug with my Collection List by using flexbox formatting instead of columns per Support’s suggestion and this article. Before fixing the bug, I had a hover effect that would make the name of the project appear while the thumbnail lightens. I am having trouble recreating this and would love any ideas on how to make this happen with the new flex formating!

Right now I am pretty much faking it as the effect goes away or flickers when you hover over where the project name is located.

Thanks so much!


Here is my public share link: https://preview.webflow.com/preview/mollygundlach?preview=341528b43784623bf835c78f1182aac1

And here’s a link to the live site:
http://mollygundlach.webflow.io/


#2

Did you ever get the list hover to work? If not, I can show you how to remove the flickering.


#3

@garymichael1313 I haven’t! That would be wonderful, thank you!


#4

Give me a sec, I’ll type it up and re-post it in this one.

Use first Link Block:

  1. Delete Wanderfund text.

  2. On Project Image: Remove all styles on normal and hover states, you won’t need anything done to the image. (Look for any blue color settings and click to remove all)

  3. Click DynChild: Add a new “Text Link” under it. Drag image out of link block, place under new text link. Delete the link block. (If you want padding, add 5px on DynChild)

  4. On DynChild: Add position Relative.

  5. On Text Link Block: Pull text from field, Add position Absolute, Full. Add Flex, center, center.

  6. Click on the text in center, type name. Add desired styles. (Remove underline if present).

  7. Still on Text Link Block: Go to States. On hover add background color, opacity 100%.

  8. Back on Normal State: Add opacity 0%, add transition for opacity 500.

Save. Preview it and you’ll see the hover without flicker.

Let me know if have any issue.