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>
This article is about: css, 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.

Discussions

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

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

  • Maaher Aldoos

    Beautiful ^_^ :D :)

  • Steven Robijns

    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 :)

  • 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”