StackTips

How to Display Text Overlay on a Responsive Image in Bootstrap

bibhu_bib avtar

Written by

Bibhudatta,  4 min read,  4.4K views, updated on Sept. 17, 2023

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.

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>
bibhu_bib avtar

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 posts

Let’s be friends!

🙌 Stay connected with us on social media for the latest updates, exclusive content, and more. Follow us now and be part of the conversation!