I use bootstrap and having a problem to overlay caption over an image, the caption div just cannot fit within the box, as shown below:
HTML:
<div class="col-sm-4">
<a href="#">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="#">
<img src="images/upload/projects/21/cake.png" class="img-responsive" alt="">
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div>
</a>
</div>
CSS:
div.desc{
position: absolute;
bottom: 0px;
width: 100%;
background-color: #000;
color: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
}
SOLUTION:
Thanks to @himanshu to solved the issue.
div.desc{
background-color: #000;
bottom: 0;
color: #fff;
left: 0;
opacity: 0.5;
position: absolute;
width: 100%;
}
.fix{
width: 100%;
padding: 0px;
}
I think problem is in placement rather then overlay, div.desc
is absolute and image is its sibling. So overlay will not follow image it will follow only anchor tag or your div.wrapper
.
From what I can see is that there is a margin on image or padding in anchor or wrapper.
The best solution is to put desc
and image in another div
with 100% width with 0 padding.
<div class="col-sm-4 wrapper">
<a href="#">
<div class="fix">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" />
<div class="desc">
<p class="desc_content">The pack, the basic unit of wolf social life.</p>
</div></div>
</a>
</div>
CSS:
.fix{width:100%; padding:0px;}
For others trying to overlay a caption on an image in Bootstrap, consider using carousel captions.
See here: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
Try this
<div class="wrapper">
<div class="">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
</div>
<div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
</div>
<div class="wrapper">
<div class="">
<img src="images/upload/projects/21/wolf.jpg" class="img-responsive" alt="" >
</div>
<div class="desc_content" style="">The pack, the basic unit of wolf social life.</div>
</div>
css
div.desc_content {
background-color: #000;
color: #FFF;
font: bold 11px verdana;
padding-left: 10px;
padding-top: 7px;
height: 23px; opacity: 0.7;
position: relative;
top: -30px;
}
div.wrapper{
float: left;
position: relative;
margin: 10px;
}
Use this attributes for div.desc class
div.desc{
position: absolute;
bottom: 0;
background-color: #000;
color: #fff;
opacity: 0.5;
left:0; /** new **/
right:0; /** new **/
filter: alpha(opacity=50);
}
This is what works for me. With this you will find the caption at the bottom of the image.
<div class="container-fluid">
<img src="someimg.jpg" class="img-fluid " alt="Patience">
<div class="carousel-caption d-block">
<h1>Some label</h1>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
if you want it at the top then in your CSS do the following:
.carousel-caption{
top:0;
bottom:auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.