Thumbnails Components
You can also find thumbnails
inside cards.
Basic Thumbnails
With Ripple Colors
<a href="#" class="img-thumbnail withripple">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-light">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-danger">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-warning">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-royal">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-info">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-success">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
<a href="#" class="img-thumbnail withripple color-dark">
<div class="thumbnail-container">
<img src="..." alt="..." class="img-fluid">
</div>
</a>
Custom content
Thumbnail label
Cras justo odio egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati inventore praesentium natus iure nam suscipit exercitationem facere nemo.
Thumbnail label
Cras justo odio egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati inventore praesentium natus iure nam suscipit exercitationem facere nemo.
Thumbnails with hover caption
Vertical
Diagonal
Top
Left
Right
Warning
Info
Success
Light
<h3 class="text-center">Vertical</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail">
<img src="<%= assets %>/img/demo/port11.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Horizontal</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-horizontal">
<img src="<%= assets %>/img/demo/port12.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Diagonal</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-diagonal">
<img src="<%= assets %>/img/demo/port13.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Center</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-center">
<img src="<%= assets %>/img/demo/port14.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Top</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-top">
<img src="<%= assets %>/img/demo/port15.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Bottom</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-bottom">
<img src="<%= assets %>/img/demo/port1.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Left</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-left">
<img src="<%= assets %>/img/demo/port19.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Right</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-right">
<img src="<%= assets %>/img/demo/port17.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Warning</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-center ms-thumbnail-warning">
<img src="<%= assets %>/img/demo/port18.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
<h3 class="text-center">Royal</h3>
<div class="ms-thumbnail-container">
<figure class="ms-thumbnail ms-thumbnail-center ms-thumbnail-royal">
<img src="<%= assets %>/img/demo/port18.jpg" alt="" class="img-fluid">
<figcaption class="ms-thumbnail-caption text-center">
<div class="ms-thumbnail-caption-content">
<h3 class="ms-thumbnail-caption-title">...</h3>
...
</div>
</figcaption>
</figure>
</div>
...