Bootstrap Thumbnails:

Bootstrap Thumbnails Gallery

Image galleries are such a nice and effective way to display your pictures and keep your visitors intrigued. There are tons of ways to design stunning image gallery layouts, including a thumbnail gallery. Thumbnail galleries differ from the other types of image galleries. They are similar to a slideshow as they both display multiple images in a single page. The images are alternated in between in a way that only one image is highlighted at a time. The main difference, however, is that the users can see a preview of all the images in a horizontal or vertical strip of thumbnails which is available somewhere other than the place the main image is being displayed.

The code we have in this post is for a thumbnail gallery with Bootstrap. This thumbnail gallery includes two columns of images that you can view in a larger format by clicking on each one. This Bootstrap beautiful thumbnail also has a hover effect. Any time your mouse hovers over a picture, the title and a short description will be displayed on it. In large mode, the thumbnail gallery images are displayed in the middle of the screen and clicking anywhere outside of the picture will close the window. If you wish to use this Bootstrap thumbnail gallery, you can scroll down to get the code.

Bootstrap Thumbnail

Bootstrap Beautiful Thumbnail

Thumbnail Gallery

Thumbnail Gallery with Bootstrap

Thumbnail Gallery Images

<!-- This script got from frontendfreecode.com -->
<div class="body">
    <div class="container">
        <header class="main-header">
            <i class="fa fa-camera-retro fa-4x logo"></i>
            <h1 class="title">Bootstrap and CSS<span>Transitions</span> Gallery<h1>
        </header>
        <div class="row">
            <a href="http://frontendfreecode.com/img/bicycle.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/bicycle.jpg" alt="Cow standing in field">
                        <div class="caption cow">
                            <h3>Aw yeah.</h3>
                            <p>This cow is a boss.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/car-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/car-image.jpg" alt="Person using a cup to collect water from river">
                        <div class="caption beer">
                            <h3>This looks delicious.</h3>
                            <p>Really delicious.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/cow-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/cow-image.jpg" alt="Small Italian coupe">
                        <div class="caption dog">
                            <h3>European cars.</h3>
                            <p>Are much smaller than ours.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/glass-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/glass-image.jpg" alt="Green bicycle resting on old shed">
                        <div class="caption bike">
                            <h3>Vintage bikes.</h3>
                            <p>Are awesome.</p>
                        </div>
                    </div>
                </div>
        </div>
        </a>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.body{
  background: #b8b8b8;
}
.main-header {
  text-align: center;
  margin: 1.5em 0 5em;
  padding: 1em;
  text-indent: 0;
  letter-spacing: 0;
  transition-property: text-indent, letter-spacing,;
  transition-duration: 0.7s;
  transform: scale(1,1);
} 
 .main-header:hover { 
  text-indent: .2rem;
  letter-spacing: .3rem;
  transform: scale(1.3,1.3);
}
.title {
  line-height: .2rem;
}
span {
  font-weight: 900;
}
.caption {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .8s;
}
.caption:hover {
  opacity: 1;
  transform: scale(1.2, 1.2); 
}
.thumbnail {
  position: relative;
}
 .thumbnail img {
  transition: transform .8s;
  transform-origin: 0,0;
}
 .thumbnail:hover img {
  transform: scale(1.2, 1.2);
   overflow: hidden;
}
.caption {
  position: absolute;
  top: 0;
	right: 0;
	bottom: 0; 
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  background: rgba(0,0,0, .65);
  border: 5px solid #00D180;
}
.umbrellas{
  border: 5px solid #FFB037;
}
.code{
  border: 5px solid #2E2C2D;
}
.canvas {
  border: 5px solid #AD6A3E;
}
.cow {
  border: 5px solid #31490B;
}
.beer {
  border: 5px solid #792002;
}
.dog{
  border: 5px solid #4E68C1;
}
.bike {
  border: 5px solid #4DB74F;
}
.caption h3, 
.caption p {
  color: #fff;
}
#popup {
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0;
  display: none;
}
#popup img {
  margin-left: 30%;
  margin-top: 5%;
  width: 40%;
  border: 5px solid #FFF8DC;
  border-radius: 5%;
}
#popup p {
  text-align: center;
  font-size: 1.5rem;
  line-height: 3rem;
  color: #fff;
}

/* Media Query */
@media (max-width: 768px) {
    .main-header {
    margin: initial;
  }
  .main-header:hover {
  text-indent: .1rem;
  letter-spacing: .1rem;
  transform: scale(1.1,1.1);
}
	.title {
		line-height: initial;
	}
  .thumbnail:hover img {
    transform: scale(1, 1);
  }
  .caption:hover{
    transform: scale(1,1);
  }
}
@media (min-width: 769px) and (max-width: 1040px){
  .main-header:hover {
    text-indent: .1rem;
    letter-spacing: .1rem;
    transform: scale(1.05,1.05);
  }
}

var $popup = $('<div id="popup"></div>');
var $image = $("<img>");
var $caption = $("<p> </p>");
//Append image and caption to popup before we append popup to body
$popup.append($image);
$popup.append($caption);
//Append popup div to html
$("body").append($popup);
// Capture click event on link
$("div a").click(function (event) {
    event.preventDefault();
    var href = $(this).attr("href");
    //Set src as href from link clicked
    $image.attr("src", href);
    $popup.show();
});
//Get alt text to set caption
var captionText = $("div.thumbnail").find("img").attr("alt");
$caption.text(captionText);
//Hide popup when clicked
$popup.click(function () {
    $popup.hide();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/8c01f7817d.js"></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/8c01f7817d.js"></script>
<style>
.body{
  background: #b8b8b8;
}
.main-header {
  text-align: center;
  margin: 1.5em 0 5em;
  padding: 1em;
  text-indent: 0;
  letter-spacing: 0;
  transition-property: text-indent, letter-spacing,;
  transition-duration: 0.7s;
  transform: scale(1,1);
} 
 .main-header:hover { 
  text-indent: .2rem;
  letter-spacing: .3rem;
  transform: scale(1.3,1.3);
}
.title {
  line-height: .2rem;
}
span {
  font-weight: 900;
}
.caption {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .8s;
}
.caption:hover {
  opacity: 1;
  transform: scale(1.2, 1.2); 
}
.thumbnail {
  position: relative;
}
 .thumbnail img {
  transition: transform .8s;
  transform-origin: 0,0;
}
 .thumbnail:hover img {
  transform: scale(1.2, 1.2);
   overflow: hidden;
}
.caption {
  position: absolute;
  top: 0;
	right: 0;
	bottom: 0; 
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  background: rgba(0,0,0, .65);
  border: 5px solid #00D180;
}
.umbrellas{
  border: 5px solid #FFB037;
}
.code{
  border: 5px solid #2E2C2D;
}
.canvas {
  border: 5px solid #AD6A3E;
}
.cow {
  border: 5px solid #31490B;
}
.beer {
  border: 5px solid #792002;
}
.dog{
  border: 5px solid #4E68C1;
}
.bike {
  border: 5px solid #4DB74F;
}
.caption h3, 
.caption p {
  color: #fff;
}
#popup {
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0;
  display: none;
}
#popup img {
  margin-left: 30%;
  margin-top: 5%;
  width: 40%;
  border: 5px solid #FFF8DC;
  border-radius: 5%;
}
#popup p {
  text-align: center;
  font-size: 1.5rem;
  line-height: 3rem;
  color: #fff;
}

/* Media Query */
@media (max-width: 768px) {
    .main-header {
    margin: initial;
  }
  .main-header:hover {
  text-indent: .1rem;
  letter-spacing: .1rem;
  transform: scale(1.1,1.1);
}
	.title {
		line-height: initial;
	}
  .thumbnail:hover img {
    transform: scale(1, 1);
  }
  .caption:hover{
    transform: scale(1,1);
  }
}
@media (min-width: 769px) and (max-width: 1040px){
  .main-header:hover {
    text-indent: .1rem;
    letter-spacing: .1rem;
    transform: scale(1.05,1.05);
  }
}
</style>

</head>
<body>
<div class="body">
    <div class="container">
        <header class="main-header">
            <i class="fa fa-camera-retro fa-4x logo"></i>
            <h1 class="title">Bootstrap and CSS<span>Transitions</span> Gallery<h1>
        </header>
        <div class="row">
            <a href="http://frontendfreecode.com/img/bicycle.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/bicycle.jpg" alt="Cow standing in field">
                        <div class="caption cow">
                            <h3>Aw yeah.</h3>
                            <p>This cow is a boss.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/car-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/car-image.jpg" alt="Person using a cup to collect water from river">
                        <div class="caption beer">
                            <h3>This looks delicious.</h3>
                            <p>Really delicious.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/cow-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/cow-image.jpg" alt="Small Italian coupe">
                        <div class="caption dog">
                            <h3>European cars.</h3>
                            <p>Are much smaller than ours.</p>
                        </div>
                    </div>
                </div>
            </a>
            <a href="http://frontendfreecode.com/img/glass-image.jpg">
                <div class="col-xs-6 col-sm-3 col-md-3">
                    <div class="thumbnail">
                        <img src="http://frontendfreecode.com/img/glass-image.jpg" alt="Green bicycle resting on old shed">
                        <div class="caption bike">
                            <h3>Vintage bikes.</h3>
                            <p>Are awesome.</p>
                        </div>
                    </div>
                </div>
        </div>
        </a>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var $popup = $('<div id="popup"></div>');
var $image = $("<img>");
var $caption = $("<p> </p>");
//Append image and caption to popup before we append popup to body
$popup.append($image);
$popup.append($caption);
//Append popup div to html
$("body").append($popup);
// Capture click event on link
$("div a").click(function (event) {
    event.preventDefault();
    var href = $(this).attr("href");
    //Set src as href from link clicked
    $image.attr("src", href);
    $popup.show();
});
//Get alt text to set caption
var captionText = $("div.thumbnail").find("img").attr("alt");
$caption.text(captionText);
//Hide popup when clicked
$popup.click(function () {
    $popup.hide();
});
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars