Tutorials Bootstrap How to Display Text Overlay on a Responsive Image in Bootstrap

How to Display Text Overlay on a Responsive Image in Bootstrap

Displaying text over an image thumbnail is one of the most common pattern used widely by most of the websites. In this tutorial, we will take a look into how to design a responsive grid of images using and display text over each image item.

Bootstrap offers different ways to achieve this result. While some developers prefer to use a carousel with a single item others use CSS tricks. In this example, we will use one of the easy way out.

[download demo=”http://stacktips.com/demo/text-overlay-on-image-in-bootstrap-demo”]
Complete Source Code
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap image Overlay</title>
    <meta content="width=device-width, initialscale=1" name="viewport">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.j" type="text/javascript">
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
    </script>
    <style>
    .caption {
        width:100%;
        bottom: .3rem;
        position: absolute;
        background:#000;
        background: -webkit-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        background: -moz-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        background: -o-linear-gradient(bottom, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        background: linear-gradient(to top, #000 40%, rgba(0, 0, 0, 0) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    }

    .thumbnail {
        border: 0 none;
        box-shadow: none;
        margin:0;
        padding:0;
    }

    .caption h4 {
        color: #fff;
        -webkit-font-smoothing: antialiased;
    }
    </style>
</head>
<body>
    <div class="container" style="margin:20px;">
        <div class=" col-sm-12 row">
            <div class="col-sm-4">
                <div class="col-sm-12 thumbnail text-center">
                    <img alt="" class="img-responsive" src=
                    "http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">

                    <div class="caption">
                        <h4>Lorem ipsum dolor sit amet, consectetur</h4>
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="col-sm-12 thumbnail text-center">
                    <img alt="" class="img-responsive" src=
                    "http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">

                    <div class="caption">
                        <h4>Lorem ipsum dolor sit amet, consectetur</h4>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-4">
                <div class="col-sm-12 thumbnail text-center">
                    <img alt="" class="img-responsive" src=
                    "http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">

                    <div class="caption">
                        <h4>Lorem ipsum dolor sit amet, consectetur</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Total
0
Shares
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Randall West
Randall West
6 years ago

Hard to imagine this code working with “conainer”

Rajesh
Rajesh
6 years ago

How come its working without container class.

Christian De Bellefeuille
Christian De Bellefeuille
5 years ago

Demo no more accessible.

Nilanchala Panigrahy
Nilanchala Panigrahy
5 years ago

Oops! It was a broken link and it is fixed now. Please check
Thanks for pointing out.

Christian De Bellefeuille
Christian De Bellefeuille
5 years ago

thanks, it work!

Mark Rash
Mark Rash
5 years ago

This is great! When using this in conjunction with img-responsive, is it possible to ensure the caption is only as wide as the image itself? I feel like there’s something obvious I’m missing, but when I have an image that doesn’t fill the full width of the column due to its dimensions, the caption covers the white space and doesn’t look right. Any thoughts? Thanks again for this great tut.

Steven Robijns
Steven Robijns
4 years ago

The image is shown a bit underneath the caption. As you see in your demo the caption is not perfectly aligning with the bottom of your image. I see that you’re trying to align with bottom: .3rem; That does not feel right, I can’t seem able to fix this, so please help 🙂

Maaher Aldoos
Maaher Aldoos
4 years ago

Beautiful ^_^ 😀 🙂

SaMol PP
SaMol PP
4 years ago

how to create a link within that image?
has anyone has done this before ..pls

Mahdiyeh
Mahdiyeh
4 years ago

Unfortunately demo doesn’t work! There is no image!

Previous Post
Mobile Frameworks HTML, CSS

7 Commendable HTML5 Frameworks That Augment Responsive Web Design

Next Post

How to Speed up your Android Smartphone

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
10
0
Would love your thoughts, please comment.x
()
x