How do I make images larger when clicked on?

Hello!

I’m working on my sites portfolio pages and I would like the smaller images to “blow up” to a larger scale when clicked on. Kind of like a pop up window I guess is how I would describe it.

To help describe this, here are some images. I’m fairly new to webflow.


https://mycreativepixel-site.webflow.io/portfolio-pages/forest-beyond-my-creative-pixel

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey there @creativeclicks!

I should be able to help you here, but can you give me your read-only link?

Also, have you tried using the lightbox element? Add your small image as the thumbnail image, and then under the settings tab on the right for the lightbox, add your larger image as the media. You can also link all of these images together, so if someone clicks a small thumbnail, it will open a full screen window to let users scroll through all of your larger images.

Thanks!

Oh my bad. I thought it was already at the bottom.

https://preview.webflow.com/preview/mycreativepixel-site?utm_medium=preview_link&utm_source=designer&utm_content=mycreativepixel-site&preview=e0c17831c3a566972dc7505cc765aec1&pageId=5e90abf7f3dfacf0be41617f&mode=preview

No worries, thanks for sharing the link. It sounds like Webflow’s native lightbox would be a perfect solution for your problem. Please take a look at their tutorial:

Here’s an example I made a while back showing a lightbox in action:

https://www.loom.com/share/63245eab4718479db809c612f54e3731

If you are stuck after trying this, let me know, and we can walk through it.

Thanks!

2 Likes

Yes! That’s exactly what I need! Thank you. I’ll check out that link. :slight_smile:

This was it. Just tried it and now I’m in love with lightbox’s. lol
Thanks again!

Hahaha, that’s great to hear. Glad those links helped.

Have a good one!

Already did that so we are good. :wink: