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>
Unfortunately demo doesn’t work! There is no image!
Beautiful ^_^ :D :)
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… Read more »
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… Read more »
Demo no more accessible.
Oops! It was a broken link and it is fixed now. Please check
Thanks for pointing out.
thanks, it work!
How come its working without container class.
Hard to imagine this code working with “conainer”
how to create a link within that image?
has anyone has done this before ..pls