content logo

Bootstrap Thumbnails:

Simple Bootstrap Thumbnails with Sliding Text Effect

Many websites use different kinds of pictures to mention various items. If you like to use the image thumbnails to express ideas, you can add a beautiful caption to them. The Simple Bootstrap Thumbnails with Sliding Text Effect do the same job you want. You can use these CSS Sliding Thumbnails and show your products or information. Most advanced websites have the same JavaScript Thumbnails with Hover Effect to get more audiences because this item is so important in the design of all websites. In addition to its simplicity, this HTML Thumbnail with Hover Effect is so functional and attractive.

As the following preview shows, this code includes three sections for placing the pictures. When you put the mouse on one of these sections, a blue part full of description will appear with an animating effect. The background of this part is blue, and the writings are white. This section is shown from top to down and is an excellent idea for using this code on websites with a blue theme. You can use the Blue Caption for Thumbnails to gain more audiences. Plus, the Animating Text for Thumbnails attracts more people against simple codes.

#

CSS Sliding Thumbnails

#

Animating Text for Thumbnails

#

Blue Caption for Thumbnails

#

Javascript Thumbnails with Hover Effect

#

HTML Thumbnail with Hover Effect

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/Ur43esv.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>WILLIAM SHAKESPEARE</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/8RKXAIV.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>JK ROWLING</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/J6l19aF.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>WILLIAM SHAKESPEARE</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.container {
    margin-top: 4px
}
.panel-default {
    text-align: center;
    cursor: pointer;
    font-family: 'Raleway', sans-serif
}
img{
    width:100%;
}

.panel-default>.panel-footer {
    color: #fff;
    background-color: #47c8ed;
    display: none;
    text-shadow: 1px 1px 1px rgba(150, 150, 150, 1)
}
.panel-default i {
    font-size: 12em
}
$(function () {
    $('.panel').hover(function () {
        $(this).find('.panel-footer').slideDown(250);
    }, function () {
        $(this).find('.panel-footer').slideUp(250);
    });
})
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style>
.container {
    margin-top: 4px
}
.panel-default {
    text-align: center;
    cursor: pointer;
    font-family: 'Raleway', sans-serif
}
img{
    width:100%;
}

.panel-default>.panel-footer {
    color: #fff;
    background-color: #47c8ed;
    display: none;
    text-shadow: 1px 1px 1px rgba(150, 150, 150, 1)
}
.panel-default i {
    font-size: 12em
}
</style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/Ur43esv.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>WILLIAM SHAKESPEARE</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/8RKXAIV.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>JK ROWLING</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-10 col-xs-4">
            <div class="panel panel-default">
                <div class="panel-body"> <img src="https://i.imgur.com/J6l19aF.jpg" alt="profile"> </div>
                <div class="panel-footer"><b><u>WILLIAM SHAKESPEARE</b></u><br><br>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(function () {
    $('.panel').hover(function () {
        $(this).find('.panel-footer').slideDown(250);
    }, function () {
        $(this).find('.panel-footer').slideUp(250);
    });
})
</script>

</body>
</html>
Preview