Thumbnail Pop Up

TUTORIAL LINK | HOME

Thumbnail pop ups to a larger modal image
with a full screen overlay using Foundation Reveal
Reveal on the Foundation Site
Foundation 6.4.1


Pop-Ups Images using Foundation Reveal

When you click on the thumbnails a larger image pops up into a modal window
Modal is a container div we add to the page with RSD
The page is covered with an opaque overlay so the focus is on the pop up modal
You can click on the overlay to close the pop up

Reveal Example
Placeholder Picture

The Pop Up Options

Most of the time you would only use a fade but you can use other animation effects, those are listed below
You can add a close button on the pop up image
You can add text to the pop up images as well like these examples

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


Foundation Reveal Animation Options

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

Placeholder Picture