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.
DEMO
Complete Source Code
lang="en"></span><span class="pln" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; vertical-align: baseline; color: rgb(197, 200, 198);">Bootstrap image Overlay</span><span class="tag" style="margin: 0px; padding: 0px; border: 0px; font-weight: inherit; vertical-align: baseline; color: rgb(204, 102, 102);"> content="width=device-width, initialscale=1" name="viewport"> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
class="conainer" style="margin:20px;">
class=" col-sm-12 row">
class="col-sm-4">
class="col-sm-12 thumbnail text-center">
![]()
alt="" class="img-responsive" src=
"http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">
class="caption">
Lorem ipsum dolor sit amet, consectetur
class="col-sm-4">
class="col-sm-12 thumbnail text-center">
![]()
alt="" class="img-responsive" src=
"http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">
class="caption">
Lorem ipsum dolor sit amet, consectetur
class="col-sm-4">
class="col-sm-12 thumbnail text-center">
![]()
alt="" class="img-responsive" src=
"http://www.wallpapereast.com/static/images/6801692-lovely-nature-wallpaper.jpg">
class="caption">
Post A Comment:
0 comments:
Post a Comment