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.

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

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.

Related Articles

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.
  • Mark Rash

    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.

  • Christian De Bellefeuille

    Demo no more accessible.

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

      • Christian De Bellefeuille

        thanks, it work!

  • Rajesh

    How come its working without container class.

  • Randall West

    Hard to imagine this code working with “conainer”