Foundation Photos

Foundation provides a responsive images, you can create a thumbnail image popups drink:

Thumbnails

In <img> elements outside Add <a> element picture as an anchor link.

In <a> add tags .th class picture as thumbnails. Move the mouse to the top of a light blue frame appears:

	Responsive image Image Foundation in response to the default style. We can reset your browser to view the page size in the example image zoom effect.

Fillet Photos

We can .th class adds .radius to set the fillet class Thumbnail:

Concise pop

Foundation can be easily achieved image pop.

To create a shell window in <ul> to add the element .clearing-thumbs class and data-clearing properties. In the <ul> in the list of add pictures.

Note: The image popups need JavaScript. So it needs to be initialized before using Foundation JS.

Image text description

You can add data-caption attribute to each picture to set the picture's description:

	Tip: You can add data-caption attribute in HTML elements, such as data-caption = "<h2> Pulpit Rock </ h2> <p> Located in Norway </ p>"

Show only a thumbnail

When you need to achieve, a thumbnail is displayed only when you can <ul> use .clearing-feature classes and <li> use .clearing-featured-img class.