Bootstrap 3 CSS Image Caption Overlay

Bootstrap 3 CSS image caption overlay

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="Sample Image" />
        <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;}

Bootstrap 3: Text overlay on image

You need to set the thumbnail class to position relative then the post-content to absolute.

Check this fiddle

.post-content {
    top:0;
    left:0;
    position: absolute;
}

.thumbnail{
    position:relative;

}

Giving it top and left 0 will make it appear in the top left corner.

Bootstrap Overlay Text on Image

I found an Answer. I have missed Position = "relative" for Parent Div

CSS

In fixOverlayDiv class added Position = "relative"

.fixOverlayDiv{
 position: relative;
 width:100%; 
 padding:0px;
}

Updated Fiddle Here

Bootstrap 3 Overlay caption not aligned properly

CSS

.row {
    -moz-column-width: 18em;
    -webkit-column-width: 18em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;
}
.item {
    display: inline-block;
    width: 100%;
}
.well {
    position:relative;
    display: block;
    padding: 0;
}
.well span {
    position: absolute;
    right: 0;
    top: 0;
    padding:1%;
    color: #fff;
    background:rgba(0, 0, 0, 0.50);
}
.well h4 {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    padding:1%;
    color: #fff;
    background:rgba(0, 0, 0, 0.50);
    width: 100%;
    padding: 15px;
}

For a full width, cover image on each item, add width:100% to the <img/> elements.

.well img {
    width:100%;
}

Demo: https://jsfiddle.net/9dz3xxe9/1/

bootstrap responsive images with shadow+text overlays and another overlay when hover

You could position your overlay absolutely and move it out of the way with transform: translateY(). On hover you move it back in. Is this the effect you wanted to achieve?

Here is a CodePen to play with: https://codepen.io/Sixl/pen/bOdwaZ?editors=1100

.product-item {  position: relative;}
.product-container {  background: #000;  position: relative;  width: 100%;  overflow: hidden;}
.product-container .product-description {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  display: flex;  justify-content: center;  align-items: center;  color: #fff;  background-color: rgba(0, 0, 0, 0.6);  text-align: right;  padding: 0.2em 0.4em 0.2em;  -webkit-transform: translateY(101%);  transform: translateY(101%);  transition: -webkit-transform 200ms ease-in-out;  transition: transform 200ms ease-in-out;  transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;}
.product-container:hover .product-description {  -webkit-transform: translateY(0);  transform: translateY(0);}
.product-img {  display: block;  max-width: 100%;  height: auto;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">  <div class="row">    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-1">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=20">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-2">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=21">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-3">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=22">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-4">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=23">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-5">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=24">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>    <div class="product-item col-md-4 col-sm-6 col-xs-12 p-6">      <a href="#">        <figure class="product-container">          <img class="product-img" alt="Sample Image" src="https://picsum.photos/800/450?image=25">          <figcaption class="product-description">Some description</figcaption>        </figure>      </a>    </div>  </div></div>

Carousel captions not overlaying image on mobile

i think this block of code will solve your problem, add them on your custom .css file...
let me know if you have any questions

@media screen and (max-width: 680px) {
  .carousel-caption {
    top: 0;
  }
  .carousel-caption h1 {
    font-size: 1.5rem;
  }
  .carousel-caption .btn {
    padding: .3rem 1rem;
    font-size: 1rem;
  }
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
  .carousel-indicators {
    display: none;
  }
  .carousel-item {
    height: 330px;
  }
}

/*max-width:680px*/

@media screen and (max-width: 420px) {
  .carousel-item {
    height: 220px;
  }
} 

---

Related Topics