▼
Streaming live at 10am (PST)

Hover Modal CMS Dynamic Content Organization

Design help General
#1

Hey guys,

Please help! I am so new to Webflow.

Below is a screenshot of my goal. In the preview link you will see the hover modal I created. When you hover over the div block a slightly larger div block is revealed. BOTH the smaller and revealed div’s are linked to corresponding CMS content. For example, If I hovered over the Tidal box, I would want to have the CMS content from Tidal displayed in the revealed div.

So I’m not sure if I have organized my classes and dynamic content properly to apply the same technique to the Tidal and Deezer boxes…

So my question is: If I wanted to apply the same technique to multiple other div blocks with different dimensions what is the most efficient way to organize my CMS and classes?

Thanks!

Ihttps://preview.webflow.com/preview/kyle-s-amazing-site?preview=06e354911dcd2d53e6fea7688421b1bd

ThreeBoxesTestWebflow.png766×731 62.4 KB

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

#2

This is how I’m sure it will work if you have multiple collections.
You’re going to need a dynamic list in a unique DIV that’s limited to display only 1 item, for each box.
Then, you need a duplicate of the first interaction, that triggers that unique DIV when hovered over each box.

If you have all info in one collection, only one dynamic list would suffice imho.
You just make the dynamic item as you have right now with spotify. Make a reveal-DIV with content from the same collection. Hide that, and have that pop-up with an interaction. You have to play around with restricting/limiting content of those div’s to only 1, and to only display current. (I’m doing this by heart, so maybe there’s different names in the designer)

#3

Hi @moofawsaw I took a look at your site and noticed that you have your modal as a separate list. Your modal would have to be inside of your dynamic list item (as a sibling element to your button).

I had put together a tutorial on making modals last year sometime which allows for dynamic modals too, looks like I should go and beautify it haha): http://modal-tutorial.webflow.io/

Feel free to reach out here if you have any questions, just tag me @Waldo :smiley:

#4

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