Since kicking off this site’s build I’ve kept a collection of portfolios with designs, functionality and experiences I find inspiring. The other night, I came across a new one that had a super subtle image zoom experience I really liked so I took a quick look under the hood to see how it was built.

I noticed the image elements had a class of medium-zoom as well as a data-zoomable attribute on it. I did a quick google search of “medium-zoom js” and sure enough a javascript library from Francois Chalifour was the first item.

I downloaded the libary, added the data-zoomable element to the images I wanted zoomable and that was it.

Super straightforward.

Just like that my site’s images now have zoom 👏

Go ahead and try it out ↴

↑ click me