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:
The first image is plain. All the images are wrapped in a <a>
link. Foundation adds a 4 px white border around the containers with a th
class and a 1 px shadow around that. The third image has a mouse over it, so it is in the hover state. If you look carefully...