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/
Did you ever get the list hover to work? If not, I can show you how to remove the flickering.
@garymichael1313 I haven’t! That would be wonderful, thank you!
Give me a sec, I’ll type it up and re-post it in this one.
Use first Link Block:
-
Delete Wanderfund text.
-
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)
-
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)
-
On DynChild: Add position Relative.
-
On Text Link Block: Pull text from field, Add position Absolute, Full. Add Flex, center, center.
-
Click on the text in center, type name. Add desired styles. (Remove underline if present).
-
Still on Text Link Block: Go to States. On hover add background color, opacity 100%.
-
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.