The image zoom on Medium is really slick. You click on a single image and it enlarges while everything behind it fades to white. Pretty standard. But the really nice part is that not only clicking anywhere but also scrolling zooms the image out and fades the page back in. It’s super slick.
Does anyone think it’s possible to recreate this effect in webflow using behaviors - especially the scroll?
Medium is pretty rad in what they do. The guys and gals behind the design of Medium is Teehan-Lax and they rock too. Check out their case studies. Mind blown.
I looked at fluid box but it works differently. 1. It fades from the smaller image to the larger version as it zooms (which is great for file size but it’s not as smooth) and 2. It doesn’t zoom out when any scrolling is detected. Those are the two features that make Medium’s solution unique.
@Mogeek fluidbox is nice but it’s not near the medium lightbox effect, the whole idea of the ixd achieved by medium is that the image returns nicely to it’s place upon scrolling, in fluidbox it’s not achivable.
2 Add these references before tags in custom code
`
`
3 Add data-action=“zoom” to the custom attribute of the image
_Actually i found out that you can add the data-action to a higher level element such as rich text block and then all the images you add inside will zoom. Useful if you have a collection and don´t have the possibility to add a data-action directly to the element in Webflow.
But that is easily done in webflow ofc. Thanks for sharing!
