Foundation CSS Thumbnail Sass Reference
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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > < link rel = "stylesheet" href = "style.css" > < title >w3wiki</ title > <!-- font-awesome cdn --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > </ head > < body > < center > < h1 class = "title" style = "color:green;" > w3wiki </ h1 > < h3 class = "subtitle" >A computer science portal for Beginner </ h3 > < div class = "gfg" > < img class = "thumbnail" alt = "THumbnail image" src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ 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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > < link rel = "stylesheet" href = "style.css" > < title >w3wiki</ title > <!-- font-awesome cdn --> < script src = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js' > </ script > </ head > < body > < center > < h1 class = "title" style = "color:green;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ h3 > < div class = "gfg" > < img class = "thumbnail" alt = "THumbnail image" src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ 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
Contact Us