How to create a pop up of an image coming from CMS

Design help Animations & Interactions
#1

I am trying to create a pop up of an image which is hosted in a CSS collection

pop%20up

On this screen grab, you can view the image in the background.
I have managed to create wrapper and the interaction.

However, how can I limit the pop up to only show me the image I have clicked on knowing that the images are part of a feed from the CSS and might have different height.

Tricky, tricky. Thank you for your help.

GT

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

#2

Hi @Gato

Welcome to the forums.

Could you share your read only link please.

We can then help a lot easier as we can use your site to demonstrate :smiley:

So you want the image to pop up that is relevant to the page you are on?

1 Like
#3

Hi Mark

Here you go:

https://preview.webflow.com/preview/joulestudio?preview=b55c684e2f0b9ac4f1cc9f65e405e19c

Thank you for your help

GT

1 Like
#4

Check the what we do advertising page :slight_smile:

#5

Thank you, could you explain a bit more of the effect or experience you would like to create.

How will that pop modal be accessed, and how do you want the dynamic content from the CMS to be displayed?

1 Like
#6

Hi Mark,

I have updated the page so it makes more sense.

If you go to “what we do” and select “Advertising”, you will view a post: “FRENCH CONNECTION 2012 : THE MUSE”

If you click on the image, the pop up will open.

I would like the pop up to display the “French Connection” image only (nothing else).

Thank you again for your help.

1 Like
#7

10-20 Mins and I’ll put a video here to show exactly what to do… :slightly_smiling_face:

1 Like
#8

Mark, I am already doing a little dance :wink:

#9

Haha, video is uploading…

CloudApp

Here is the finished effect…
CloudApp

1 Like
#10

Yes, that’s exactly it :grinning:

So how do I do that?

Thank you again

#11

Link is here

CloudApp
1 Like
#12

Mark. Thank you ever so much

This is just amazing and I would never ever have managed this on my own

1 Like
#13

You’re very welcome, that’s what the forums are here for. :smiley: Just mark it as solution when you’re done so others can find it if they need to.

It was actually @Waldo who taught me that trick, I just updated it with IX 2.0.

Good luck with the site!

1 Like
#14

Mark, That tutorial was superb; however, when I click on one of my CMS items, I get modals for every one of my CMS entries. Is there a way I can define which modal should show?

EDIT: If you are having this problem, the issue is within your interaction. Instead of selecting “affect > selected element”, Select “affect > class > only siblings with this class”