Foundation CSS Thumbnail
Last Updated :
16 Mar, 2022
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.
Syntax:
<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.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Thumbnail</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Thumbnail Image</strong>
<br /><br />
</center>
<img class="thumbnail"
alt="THumbnail image"
src=
<img class="thumbnail"
alt="THumbnail image"
src=
<img class="thumbnail"
alt="THumbnail image"
src=
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
OutputFoundation CSS Thumbnail
Example 2: This example demonstrates a thumbnail image made using the thumbnail class of foundation CSS on <a> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Thumbnail</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body style="padding: 30px;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Foundation CSS Thumbnail</strong>
<br /><br />
</center>
<a class="thumbnail"
<img alt="THumbnail image"
src=
</a>
<a class="thumbnail"
<img alt="THumbnail image"
src=
</a>
<a class="thumbnail"
<img alt="THumbnail image"
src=
</a>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
OutputFoundation CSS Thumbnail
Reference: https://get.foundation/sites/docs/thumbnail.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...