Album Hover + Active Effect

Building upon the photo interacting—those are for photos and images that open into lightboxes— this is a link to a larger, organized photo album.

The gif is from a screencapture from Safari, using production code. The photo is sized similarly to the rebounded shot, but with a parent sized similarly, and a duplicate text element within that parent, receiving the opposite of the photo's transformations, so that it appears continuous with its inverted copy.

When these links appear in the album index, the photo and text position alternate ltr/rtl, and align on the photos' trailing/leading edge. Text position is overridden in a number of cases so that the inversion happens within a letter, rather than between or on edges. Finally, the photo and text resize w/ the viewport, but the photo resizes fluidly, while the text resizes fluidly among breakpoints, so as to maintain legibility at smaller sizes.

album_hover___active_effect.mp4
600 KB
Download
Posted on Sep 3, 2018
Wil Nichols
Design at Zello

More by Wil Nichols

View profile