Hello!
I have a CMS collection that has images in a grid, so that they are displayed 2-across. I’d like the ability to click on one and have it pop-up so it displays bigger / full width.
I’ve seen a few posts regarding this, but all of the links and support videos have expired.
Please advise!
It’s difficult to imagine exactly what you mean, but if it’s the same content they’re clicking on, you can just use a click interaction to take the element frame and resize / modal it.
If the content is slightly different or expanded, like click a property, see the details, I use this approach.
Yes, the small [scaled down] image that is clicked then expands / pops-up to a larger version [full sized] of the exact same image.
This is temporary. Any click anywhere will close this pop-up.
I’m not seeing any technical step-by-step where to do this process. People say ‘use modal’ … but how / where / why?
Here is a view with text descriptors.
WHY
because for what you are describing the modal is standard approach.
WHERE
inside your collection item
HOW
here is modal example I have shared many times on this forum take a look to learn how it can be done…
if this would not be clear you can find many other examples on “made in Webflow”.
Did you read my link? There is a cloneable there that breaks down the exact technique for building CMS-driven modals. You can find tons of other modal-building references in Webflow U, Made in Webflow, Youtube, and in this forum.
Mine is specific to CMS driven modals which is a unique problem scenario.
Yes, I read the link and studied it extensively.
Keep in mind I have built three simple Webflow websites, but have not run across the term modal. (This is weird, since I have watched almost every video from the Webflow team.) You didn’t define it, but it seems synonymous for pop-up.
Back to the example. I noticed that each image in your example has 12 levels of nesting. As I scanned all of the settings, it wasn’t clear which of the settings was handling the pop-up functionality.
It can be exceptionally difficult to look at a completed solution and ascertain which elements are doing what … without a roadmap (or video tutorial!)
I have observed a few clues, but I didn’t have enough information or confidence to start experimenting.
This lead me to study the modal-herb-image and modal-herb-content. Again, so many settings! it’s not clear how or where the pop-up action / script / animation is happening.
I teach a college course and my mental shortcoming is a common trait I see with students. First timers (like me!) need the step-by-step. I can’t give someone a finished project and say, “Look at it. Now do it.”
If you can direct me to a tutorial, that would be super awesome. I have high hopes since Webflow does world-class tutorials. Watching someone set this up would be amazing.
EDIT > I am finding some simpler small-image-to-larger-image examples on the ‘Made in Weblfow’ design examples using this search Popular Websites - Webflow
A modal is just a general UX term. In most cases, it can be used synonymously with “popup”, it’s just more formal. Typically a modal requires a user action to close, and often to open. Popups are more advertising oriented and come and go often without the user’s specific desire to show/hide that additional content.
Hit Google for “webflow modals” you’ll find a ton of resources to get you started on how to build modals in Webflow. Then you can circle back to my cloneable to understand the CMS integration.
In terms of video instruction, I do have a video tutorial on a similar concept known as an expando. It has a slightly different display mechanic, but it’s also interactions-based, and CMS-driven. That should help you understand more as well.
HI @schultzeworks as @memetican mentioned there is tons of tutorials on internet in text or video form when you use “Webflow modal” keyword.
Here is one example but feel free to use your favourite browser to find one that will be for you easy to understand.
Thanks to the wonderful and helpful @memetican and @Stan
Adding the search term ‘modal’ I am finding a few more video tutorials online, so that is helping.
I was hoping there was a Webflow-produced tutorial on this topic, but nothing is coming up. I have found a forum post from Webflow support that said, 'it’s very straightforward, just watch this video I made for you…" and that link is dead.
Almoost all of the examples are fairly complex pop-ups; as they have structured text, images, and button data inside of multiple divs.
I’m just looking for a ‘small image 
same image bigger’ pop-up and not finding much.
Thanks again.
EDIT > The above video is excellent. Nice step-by-step!
glad to see that these sources helped @schultzeworks.
you can only look on basic principles and how trigger animations while ignoring complexity. When you clone any of examples you can delete what is disturbing and keep only one element like eg. image inside. 
PS: we have also names : @memetican | @Stan 
Have you looked into CMS driven lightbox? If it’s just an image enlargement, this cloneable could work:
Thank you @Port_of_Folio
Yes, I am familiar with and have used Lightbox. I didn’t think it would work with my current design & needs on these CMS collection ‘Project pages’ … but I will check the link and investigate.
Good suggestion!
