Foundation Images

Foundation provides responsive images, allowing you to create thumbnails and image modals:

Try it Yourself »

Thumbnails

In<img>Add outside the element<a>The element uses the image as an anchor link.

In<a>Add in the tag.thThe class sets the image as a thumbnail. Hovering over it will show a light blue outline:

Example

<a href="paris.jpg" class="th">
  <img src="paris.jpg" alt="Paris">
</a>

Try it Yourself »
Note Responsive Images

In Foundation, images are responsive by default. We can resize the browser on the example page to see the image scaling effect.

Rounded Images

We can.thAdd class.radiusClass to set a rounded thumbnail:

Example

<a href="paris.jpg" class="th radius">
  <img src="paris.jpg" alt="Paris">
</a>

Try it Yourself »

Simple Modal

Foundation makes it easy to implement image modals.

To create a popup, you can <ul>add to element.clearing-thumbsclass anddata-clearingAttribute. In<ul>Add a list of images inside.

Note:Image modals require JavaScript. So you need to initialize Foundation JS before using it.

Example

<ul class="clearing-thumbs" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img src="skies200x100.jpg"></a></li>
  <li><a href="lights600x400.jpg" class="th"><img src="lights200x100.jpg"></a></li>
</ul>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

Try it Yourself »

Image text description

can adddata-captionAdd an attribute to each image to set the image description:

Example

<ul class="clearing-thumbs" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li>
  <li><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li>
</ul>

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

Display only one thumbnail.

When you need to display only one thumbnail, you can <ul>used in.clearing-featureclass and in<li>used in.clearing-featured-imgclass.

Example

<ul class="clearing-thumbs clearing-feature" data-clearing>
  <li><a href="rock600x400.jpg" class="th"><img data-caption="The Pulpit Rock" src="rock200x100.jpg"></a></li>
  <li><a href="skies600x400.jpg" class="th"><img data-caption="Sunrise Skies" src="skies200x100.jpg"></a></li>
  <li class="clearing-featured-img"><a href="lights600x400.jpg" class="th"><img data-caption="Northern Lights" src="lights200x100.jpg"></a></li>
</ul>

Try it Yourself »
other extensions