flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Thumbnail


Introduction

A thumbnail is a small image that represents a larger image (visible when clicked on), and is often recognized with a border around it.

Click on the class name to copy it.

thumbnail Main class for the thumbnail block

Elements and Classes of the popup

Click on the class name to copy it.

data-popup-open=" " Open popup element
data-popup=" " Popup block element
data-popup-close=" " Close popup block element
popup Main class popup block
popup-inner Class popup content
image-max Class to maximize image
popup-close Class for close button

Example

thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail thumbnail

Example code:

<div class="container-sm">
  <div class="container">
    <div class="thumbnail">
      <img alt="thumbnail" src="images/zomer6.jpg" data-popup-open="image-1" />
      <img alt="thumbnail" src="images/003.jpg" data-popup-open="image-2" />
      <img alt="thumbnail" src="images/004.jpg" data-popup-open="image-3" />
      <img alt="thumbnail" src="images/005.jpg" data-popup-open="image-4" />
      <img alt="thumbnail" src="images/006.jpg" data-popup-open="image-5" />
      <img alt="thumbnail" src="images/007.jpg" data-popup-open="image-6" />
      <img alt="thumbnail" src="images/008.jpg" data-popup-open="image-7" />
      <img alt="thumbnail" src="images/009.jpg" data-popup-open="image-8" />
      <img alt="thumbnail" src="images/010.jpg" data-popup-open="image-9" />
      <img alt="thumbnail" src="images/011.jpg" data-popup-open="image-10" />
    </div>
  </div>
</div>

<div class="popup" data-popup="image-1">
  <div class="popup-inner">
    <img alt="popup" class="image-max" src="../images/zomer6.jpg" />
    <a class="popup-close" data-popup-close="image-1" href="#">x</a>
  </div>
</div>
...
...
...
...


© Copyright by Web Henkie
All right reserved
Webmaster