Image enlarged on click

Design help Animations & Interactions
1

Hello there I am make a portfolio for my self and one of the things that I want to do is when the person viewing the project (on the project template page) they can click the image to see a larger version of it. Can someone please show me how to do so? Thanks!

PS. Also could someone also show once the image is clicked one how to apply the dark shadow to the whole screen so all you see is the image.

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

1 Like
2

I think what you are describing is a lightbox:

2 Likes
3

Yeah that is just what I wanted, thanks!

4

Is it possible to link the lightboxs media with my cms projects?

5

Hi @HypercarDriver, the Lightbox does not yet enable you to link to cms fields, but you can create a custom lightbox using interactions, see this cloneable example: https://webflow.com/website/Simple-Content-Gallery-CMS

Here is the item on the wishlist for the cms component integrations for lightbox, slider etc: Components + CMS functionality | Webflow Wishlist

I hope this helps!

6

ok thanks that dose help!

7

Hi Dave,
I started with the brix designer template, which might have been a mistake because now I’m trying to figure out ways to get around the template. Figuring out a way to enlarge on click for my case study images is crucial to make them understandable. Is there any way to do that with the images in rich text through the template? Or do I have to add the images directly on the page and then add an interaction?
https://nathan-chitayat.webflow.io/portfolio/fintech-mobile-app-redesign

8

Hi @nitsanc Did you ever discover if this was possible? I am looking for the same information for my UX case studies. I set up the case study page sections as rtbs because the content layout is different for each. Unfortunately, the user flows and site maps are hard to read and I would like to be able to click them into a lightbox modal. Here is my link: https://preview.webflow.com/preview/cindy-mooyman-ux-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=cindy-mooyman-ux-portfolio&preview=9035be940c379348c77678dbcc4c7786&mode=preview

9

Hi Cindy,
I’m from Toronto too!! It appears that there’s no way to do it for images that are part of a rich text field from a cms, so I rebuilt my pages piece by piece instead. At that point just adding a lightbox from the elements menu is super easy.

2 Likes