content logo

Bootstrap Thumbnails:

Bootstrap Image Thumbnail Grid with Hover Effect

Perhaps you have seen some websites that include many pictures with descriptions. If you have a website and tend to use images with detailed sections, look at this post and use the presented code functionally. We have prepared the Bootstrap Image Thumbnail Grid with Hover Effect for you in this post. This Bootstrap Grid Code allows you to add many photos to your website in regular order. As you see here, this HTML Thumbnail Grid includes three pictures. You can easily add or remove the images based on your desire.

The Grid Code with Images are placed regularly with good quality as the preview appears. These pictures are pure, and you cannot see any text around. As you place the cursor of the mouse on these photos, you face a stunning hover effect. In this effect, the selected pictures go down slightly, and you can see the title and text at the top of the photo. The header has a bigger font size, and the color of the text is white. Using this Bootstrap Thumbnail Hover Effect is so functional in all websites. You can download the Free Grid Code from the link below.

#

Grid Code with Images

#

Bootstrap Grid Code

#

HTML Thumbnail Grid

#

Free Grid Code

#

Bootstrap Thumbnail Hover Effect

<!-- This script got from frontendfreecode.com -->
<section class="new-demo">
    <div class="container">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </div>
    </div>
</section><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
.new-deal {
    width: 100%;
    float: left;
    padding: 15px 0;
}
ul {
    margin: 20px auto;
    width: 40%;
}
ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
}
.demoFirst {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    background-color: rgba(26, 76, 110, 0.5);
}
.demoFirst p,
.demoFirst h2 {
    color: #fff;
    padding: 10px;
    left: -20px;
    top: 20px;
    position: relative;
}
.demoFirst p {
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
.demoFirst h2 {
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}
.effect img {
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    -webkit-transition: bottom 0.3s ease-in-out;
    -moz-transition: bottom 0.3s ease-in-out;
    -o-transition: bottom 0.3s ease-in-out;
    transition: bottom 0.3s ease-in-out;
}
.effect img.top:hover {
    bottom: -96px;
    padding-top: 100px;
}
h2.zero,
p.zero {
    margin: 0;
    padding: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script 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 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
.new-deal {
    width: 100%;
    float: left;
    padding: 15px 0;
}
ul {
    margin: 20px auto;
    width: 40%;
}
ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
}
.demoFirst {
    position: relative;
    width: 300px;
    height: 200px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    background-color: rgba(26, 76, 110, 0.5);
}
.demoFirst p,
.demoFirst h2 {
    color: #fff;
    padding: 10px;
    left: -20px;
    top: 20px;
    position: relative;
}
.demoFirst p {
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
.demoFirst h2 {
    font-size: 20px;
    line-height: 24px;
    margin: 0;
}
.effect img {
    position: absolute;
    left: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
    -webkit-transition: bottom 0.3s ease-in-out;
    -moz-transition: bottom 0.3s ease-in-out;
    -o-transition: bottom 0.3s ease-in-out;
    transition: bottom 0.3s ease-in-out;
}
.effect img.top:hover {
    bottom: -96px;
    padding-top: 100px;
}
h2.zero,
p.zero {
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>
<section class="new-demo">
    <div class="container">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <ul class="demoFirst effect">
                <li>
                    <h2 class="zero">This is a cool title!</h2>
                    <p class="zero">Lorem ipsum dolor sit amet.</p>
                </li>
                <li>
                    <img class="top" src="http://frontendfreecode.com/img/Grid-With-CSSHoverEffect.jpg" alt=""/>
                </li>
            </ul>
        </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