Foundation CSS Thumbnail
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
A Thumbnail is a smaller version of a full digital image that could easily be viewed while browsing a number of images. They are used to traverse through pages using an anchor tag. To convert an image to a thumbnail in Foundation CSS, we can use the .thumbnail class. The thumbnail class can be applied to <img> tag as well as to <a> tag.
Foundation CSS Thumbnail Image Class:
- thumbnail: The thumbnail class converts a normal image to a thumbnail image.
<img class="thumbnail" src="image"> // OR <a href="#" class="thumbnail"><img src="image"></a>
Example 1: This example demonstrates a thumbnail image made using the thumbnail class of foundation CSS on <img> tag.
Example 2: This example demonstrates a thumbnail image made using the thumbnail class of foundation CSS on <a> tag.