O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Thumbnails

The thumbnail component provides a simple mechanism to achieve a standard look-and-feel while attaching links to images. Just add the th class to your container element.

The following code is a row with three columns where each column has an identical image:

<div class="row">
  <div class="small-4 column">
    <a href="#"><img src="images/220x220.gif"></a>
  </div>
  <div class="small-4 column">
    <a href="#" class="th"><img src="images/220x220.gif"></a>
  </div>
  <div class="small-4 column">
    <a href="#" class="th"><img src="images/220x220.gif"></a>
  </div>
</div>

The output of the preceding code will look as follows:

Thumbnails

The first image is plain. All the images ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required