Bootstrap Thumbnails:

Simple Bootstrap Thumbnail with Caption on Hover

Simplicity is always the first choice of people. So, you would better use a simple theme for your website to gain more people. By doing this, you can attract new visitors and engage older audiences quickly. The Simple Bootstrap Thumbnail with Caption on Hover is the code for all kinds of websites. Because it fits with most websites and has a beautiful harmony. Using this Simple Thumbnail Code helps you add much information and caption to the pictures. Therefore, you can save the physical space of your website while using the Bootstrap CSS Thumbnail.

You can understand that the main theme of this Animating Thumbnail Code is gray that fits with many colors and websites. As soon as you put the cursor of the mouse on a picture or click on that part, you face an animating hover effect. This effect appears from down to up and displays the caption of the images. The writings of this Thumbnail with Hover Effect are white and orange. The white writing is placed on the left, and the orange one is shown on the right side of the picture. To gain more audiences and be successful, you can use the HTML Thumbnail Caption.

Simple Thumbnail Code

Bootstrap CSS Thumbnail

Thumbnail with Hover Effect

Animating Thumbnail Code

HTML Thumbnail Caption

<!-- This script got from frontendfreecode.com -->
<section id="content">
    <div class="container">
        <div id="main">
            <div class="imageselect row add-clearfix image-imagebox">
                <div class="col-sm-6">
                    <article class="imagebox">
                        <figure> <a href="#"><img src="https://i.imgur.com/zYuFh8b.jpg" alt=""></a>
                            <figcaption> <span class="price">@ 5,234</span>
                                <h2 class="caption-title">High Hills</h2>
                            </figcaption>
                        </figure>
                    </article>
                </div>
            </div>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    background-color: #eee
}
.container {
    margin-top: 100px
}
.imageselect .imagebox {
    position: relative
}
.imageselect .imagebox figure {
    position: relative;
    overflow: hidden
}
.imageselect .imagebox figcaption {
    background: rgba(45, 62, 82, 0.9);
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px;
    -webkit-transform: translateY(140%);
    -moz-transform: translateY(140%);
    -ms-transform: translateY(140%);
    -o-transform: translateY(140%);
    transform: translateY(140%);
    -moz-transition: -moz-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    transition: transform 0.5s ease
}
.imageselect .imagebox .caption-title {
    margin-bottom: 0;
    color: #fff
}
.imageselect .imagebox .price {
    color: #fdb714
}
.imageselect .imagebox:hover figcaption {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}
.price {
    color: #f0715f;
    font-size: 1.6667em;
    text-transform: uppercase;
    float: right;
    text-align: right;
    line-height: 1;
    display: block
}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

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

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<style>
body {
    background-color: #eee
}
.container {
    margin-top: 100px
}
.imageselect .imagebox {
    position: relative
}
.imageselect .imagebox figure {
    position: relative;
    overflow: hidden
}
.imageselect .imagebox figcaption {
    background: rgba(45, 62, 82, 0.9);
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px;
    -webkit-transform: translateY(140%);
    -moz-transform: translateY(140%);
    -ms-transform: translateY(140%);
    -o-transform: translateY(140%);
    transform: translateY(140%);
    -moz-transition: -moz-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    transition: transform 0.5s ease
}
.imageselect .imagebox .caption-title {
    margin-bottom: 0;
    color: #fff
}
.imageselect .imagebox .price {
    color: #fdb714
}
.imageselect .imagebox:hover figcaption {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}
.price {
    color: #f0715f;
    font-size: 1.6667em;
    text-transform: uppercase;
    float: right;
    text-align: right;
    line-height: 1;
    display: block
}
</style>

</head>
<body>
<section id="content">
    <div class="container">
        <div id="main">
            <div class="imageselect row add-clearfix image-imagebox">
                <div class="col-sm-6">
                    <article class="imagebox">
                        <figure> <a href="#"><img src="https://i.imgur.com/zYuFh8b.jpg" alt=""></a>
                            <figcaption> <span class="price">@ 5,234</span>
                                <h2 class="caption-title">High Hills</h2>
                            </figcaption>
                        </figure>
                    </article>
                </div>
            </div>
        </div>
    </div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</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