how to make text over images in a row using bootstrap? - html

Question

Now it is not responsive, the two images should be in one row. I want to make text like painting and photography over these images. how can it be possible?
.caption {
position: absolute;
top: 9%;
left: 11px;
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.caption1 {
position: absolute;
top: -51px;
left: 11px;
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
<div class="grid-two imageandtext">
<figure>
<img src="http://lorempixel.com/300/300/" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="http://lorempixel.com/300/300/?r" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
</div>
</figure>
</div>

Answer 1

Modified your HTML and CSS a bit
.image_and_text {
position: relative;
}
.image_and_text .caption {
position: absolute;
top: auto;
bottom: 0px;
left: 30px;
color: white;
text-shadow: 2px 0px 6px rgba(0, 0, 0, 0.5);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 image_and_text">
<img src="http://lorempixel.com/300/300/" class="img-responsive img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
</div>
<div class="col-xs-6 image_and_text">
<img src="http://lorempixel.com/300/300/?r" class="img-responsive img-thumbnail">
<div class="caption">
<p>Photography</p>
</div>
</div>
</div>
</div>

Answer 2

You need to cover your image and caption text in a relative element
figure{
position: relative;
}
Check the below snippet -
figure{
position: relative;
}
.caption {
position: absolute;
top: 10px;
left: 11px;
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.caption1 {
position: absolute;
top: 10px;
left: 11px;
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext {
position: relative;
}
<div class="grid-two imageandtext">
<figure>
<img src="http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_center/fat_cat.jpg" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
</figure>
<figure>
<div class="imageandtext image_grid">
<img src="http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_center/fat_cat.jpg" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
</div>
</figure>
</div>

Answer 3

Update css part
figure {
display: flex; /*For image lineup */
}
.imageandtext, .image_grid {
position: relative;
}
.imageandtext, .image_grid {
position: relative;
margin:5px;
}
figure {
display: flex;
}
.caption {
position: absolute;
top: 9%;/*Change as your need*/
left: 52px;/*Change as your need*/
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.caption1 {
position: absolute;
top: 51px; /*Change as your need*/
left: 11px; /*Change as your need*/
width: 100%;
color: #fff;
font-family: Myriad Pro regular;
font-size: 15.31px;
}
.imageandtext,
.image_grid {
position: relative;
margin:5px;
}
<div class="grid-two imageandtext">
<figure>
<img src="http://lorempixel.com/300/300/" class="img-thumbnail">
<div class="caption">
<p>Painting</p>
</div>
<div class="imageandtext image_grid">
<img src="http://lorempixel.com/300/300/?r" class="img-thumbnail">
<div class="caption1">
<p>Photography</p>
</div>
</div>
</figure>
</div>