Skip to content
Related Articles

Related Articles

Foundation CSS Thumbnail

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Mar, 2022
View Discussion
Improve Article
Save Article

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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
  
    <!-- Compressed JavaScript -->
    <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:

Foundation CSS Thumbnail

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>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
  
    <!-- Compressed JavaScript -->
    <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" 
       href="https://www.geeksforgeeks.org/">
        <img alt="THumbnail image" 
             src=
    </a>
    <a class="thumbnail"
       href="https://www.geeksforgeeks.org/">
        <img alt="THumbnail image"
             src=
    </a>
    <a class="thumbnail" 
       href="https://www.geeksforgeeks.org/">
        <img alt="THumbnail image" 
             src=
    </a>
    <script>
        $(document).foundation();
    </script>
</body>
  
</html>


Output:

Foundation CSS Thumbnail

OutputFoundation CSS Thumbnail

Reference: https://get.foundation/sites/docs/thumbnail.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!