Thumbnail Pop Up

TUTORIAL LINK | HOME

Thumbnail pop ups using foundation reveal
Larger modal image windows with a full screen overlay
Click on the overlay or the icon to close the pop up images
Options to add text and animations to the modals
Foundation 6.4.1


Foundation Animations

SLIDE slide-in-down slide-in-left slide-in-up slide-in-right slide-out-down slide-out-left slide-out-up slide-out-right
FADE fade-in fade-out
HINGE hinge-in-from-top hinge-in-from-right hinge-in-from-bottom hinge-in-from-left hinge-in-from-middle-x hinge-in-from-middle-y hinge-out-from-top hinge-out-from-right hinge-out-from-bottom hinge-out-from-left hinge-out-from-middle-x hinge-out-from-middle-y
SCALE scale-in-up scale-in-down scale-out-up scale-out-down
SPIN spin-in spin-out spin-in-ccw spin-out-ccw

Picture OnePicture TwoPicture ThreePicture FourPicture Five
Placeholder Picture

ID Pic1 - Animation:
fade-in
fade-out

Placeholder Picture

ID Pic2 - Animation:
scale-in-up
scale-out-down

Placeholder Picture

ID Pic3 - Animation:
slide-in-left
slide-out-right

Placeholder Picture

ID Pic4 - Animation:
hinge-in-from-top
hinge-out-from-bottom

Placeholder Picture

ID Pic5 - Animation:
spin-in
spin-out


Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Placeholder Picture

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Placeholder Picture