❮ Foundation Forms Foundation Equalizer ❯

Foundation Images

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

Thumbnails

Wrap the <img> element with an <a> element to make the image a hyperlink.

Add the .th class to the <a> tag to set the image as a thumbnail. A light blue border will appear when the mouse hovers over it:

Example

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

| | Responsive Images <br>Images in Foundation are responsive by default. You can resize the browser on the example page to see the scaling effect. | | --- | --- |

Rounded Thumbnails

You can add the .radius class to the .th class to set rounded thumbnails:

Example

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

Simple Image Popup

Foundation makes it easy to implement image popups.

To create a popup, add the .clearing-thumbs class and data-clearing attribute to the <ul> element. Add the list of images inside the <ul>.

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

Example

&lt;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>

Image Caption

You can add the data-caption attribute to each image to set the image description:

Example

&lt;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>

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

Displaying a Single Thumbnail

When you need to display only one thumbnail, you can use the .clearing-feature class in the <ul> and the .clearing-featured-img class in the <li>.

Example

&lt;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>

❮ Foundation Forms Foundation Equalizer ❯