Step by Step - foundation

Thumbnail Pop Up

Thumbnail pop ups to larger image modals
Full screen overlay with options for text and animations
RSD foundation 6.4.1


Class blue
Id yellow
Type pink
Attribute green
Attribute Value orange

The Images

I use two images, a thumbnail and a larger image
The thumb is 100x100 the large is 300x300 for this example
I named the large one pic and the small pic_thumb
Select Resources and Create a folder called img
Select ADD files and place the two images in your img folder
You can add a bunch more later

The Thumbnails and their Container

Let's use a container select your column and add a Container Div
Give it the custom class thumb-container and place a 1x1 Picture link
ADD the custom class thumb to the 1x1 image so you can style them later
Don't use thumbnail that's a foundation default class
Select the 1x1 picture link icon and in Picture select Local Image
Use your thumbnail image mine is 100px x 100px so I made the max-width 100px
You can style them the way you like when you do your own
In HREF use #no-link that makes it so they don't jump to the top when clicked
For this let's add a border and change the opacity on hover
Select the regular state in Border select the center dot add 1px solid transparent
In Effects slide the opacity bar over to .9
In the hover state in Border select the center dot add 1px solid black
In Effects slide the opacity bar over to 1
Put it back to regular state when done
You can also use any style for the thumb-container to position the thumbs
Let's style the thumb-container with Flex in POSITION Display use Flex
Leave the defaults and just change Justify to Space Around

Thumbnail Reveal

Select the thumbnail picture
ADD the attribute data-open from the dropdown
For it's attribute value use pic1
That is what will open the larger image with an ID of pic1
Let's do 4, go up to duplicate (the squares icon below Target) and make 3 more
In each thumb CHANGE the data-open attribute values to pic2 pic3 and pic4

The Large Images and their Containers

Select the column from Content Add a Container Div for the large image
Select the container from Elements place a 1x1 picture
Select the 1x1 and from Design in Picture select Local Image
and use the large image you made earlier
ADD the custom class large-image to the picture so you can style them later
Since I'm using 300x300 set the max-width 300px
Select that container and ADD the class reveal from the dropdown
In RSD that will make it disappear so go to inspector
Select the containers eye icon with a slash through it
Double click to go to Design and ADD the custom class pic-container
That's for styling the containers later
Give it the ID of pic1
If you use different size images you would style the ID
Since I'll be using the same size 300x300 select reveal class to grey it out
Change the container width to 300px from the default 100% to match the image
Make the height auto
Make all the padding 0
I made the background transparent from the default white

Large Image Reveal

Select the large image container
ADD the attribute data-reveal from the dropdown
ADD the attribute data-animation-in from the dropdown
for it's animation use the attribute value fade-in
ADD the attribute data-animation-out from the dropdown
for it's animation use the attribute value fade-out

Preview ON

Use preview on in your browser and you should see it work now

The close button

Select the pic-container from Content ADD a Font Icon Link I used cross2
ADD the class close-button from the dropdown
ADD the attribute data-close
In POSITION select Absolute
You can use the default .5rem top and 1rem right or use what you like
In style select the regular and hover state colors that work best for the images
you can always add a background if needed
You can close them by clicking on the screen as well

Large image container for mobile

With the slider below the lowest breakpoint
In POSITION change the default margin from left 0 to auto
Chnage the min-height from the default 700px to 0
Those settings work for the larger screens too

The image text

Select the large image pic-container and from Content add a short paragraph
ADD the class text-center from the dropdown
You can style those the way you like
I used the custom class pic-text select the text-center class to grey it out
and I made the text white with a black background
I also made the margin bottom 0 for the default border foundation adds
and put a top 1px solid white border on the paragraph
I Edited it to say Pic1 so I know which is which later


I duplicate them so I don't have to do all this for each container
Select the pic-container and duplicate it (bottom of element use the squares icon)
Go to inspector and click the eye icon of that first pic-container
Double click the second one and Change the ID from pic1-copy to pic2
Edit the text to say Pic2
Do that for each one for this example make 4 with the ID's pic1 pic2 pic3 and pic4
Go to inspector and click on the containers eye icon to get the slashed eye
That makes them disppear from the page



I put a list of the animations in the example you can use
Just change the attribute values for in and out
Go to the inspector and select the second hidden containers eye icon
For example for Pic2's pic-container change fade-in to scale-in-up
and fade-out to scale-out-down