Open In App

Foundation CSS Thumbnail Sass Reference

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Variable Used:

Variable-Name Description Type Value
$thumbnail-border  This variable is used to define the border around thumbnail images. Border 4px solid $white 
 
$thumbnail-margin-bottom  This variable is used to define the bottom margin for thumbnail images. Length $global-margin 
 
$thumbnail-shadow  This variable is used to define the box shadow under thumbnail images. Shadow 0 0 0 1px rgba ($black, 0.2) 
 
$thumbnail-shadow-hover  This variable is used to define the box shadow under thumbnail images. Shadow  0 0 6px 1px rgba ($primary-color, 0.5) 
 
$thumbnail-transition  This variable is used to define the transition properties for thumbnail images. Transition box-shadow 200ms ease-out 
 
$thumbnail-radius  This variable is used to define the default radius for thumbnail images. Number $global-radius 
 

Example 1: In the below code, we will make use of the above variable to demonstrate the use of Thumbnail.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <!-- Compressed CSS -->
   <link rel="stylesheet" href=
    
    <link rel="stylesheet" href="style.css"
      
    <title>GeeksforGeeks</title>
   <!-- font-awesome cdn -->
    <script src=
    </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>
          
        <h3 class="subtitle">A computer science portal for geeks
        </h3>    
      
        <div class="gfg">
            <img class="thumbnail"
                 alt="THumbnail image" src=
        </div>
    </center>  
</body>
</html>


SASS Code:

$thumbnail-border: 12px solid green;
.thumbnail
{
  border:$thumbnail-border;
}

Compiled CSS Code:

.thumbnail 
{
 border: 12px solid green; 
}

Output:

 

Example 2: In the below code, we will make use of the above variable to demonstrate the use of Thumbnail.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
  <!-- Compressed CSS -->
  <link rel="stylesheet" href=
    
    <link rel="stylesheet" href="style.css">    
  
    <title>GeeksforGeeks</title>
   <!-- font-awesome cdn -->
   <script src=
   </script>
</head>
  
<body>
    <center>
        <h1 class="title" style="color:green;" >
            GeeksforGeeks
        </h1>        
        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>  
      
        <div class="gfg">
            <img class="thumbnail" alt="THumbnail image" src=
        </div>
    </center
</body>
</html>


SASS Code:

$thumbnail-shadow:0 5px red;
.thumbnail
{
  box-shadow: $thumbnail-shadow;
}

Compiled CSS Code:

.thumbnail 
{
 box-shadow: 0 5px red;
}

Output:

 

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



Last Updated : 30 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads