Search code examples
csstwitter-bootstraprgba

Add rgba background to multiple different images

I am trying to add rgba background to multiple different images. I am using Bootstrap and I am trying to make it responsive. But it looks like something went wrong.

This is an example I am trying to make something like this:

enter image description here

My code here (HTML):

.text-caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.caption:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}
<div class="container">
  <div class="row">

    <div class="text-center">
      <h3>This is some text</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

  </div>
</div>

Your help much appreciated!

Solution

  • You just need to add z-index's to the absolute positioned elements and relative positioning to the caption to make your code work properly:

    .text-caption {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index:2;
}

.caption {
  position:relative;
}

.caption:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index:1;
}
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">

    <div class="col-md-12 text-center">
      <h3>This is some text</h3>
      <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/ffb3d1/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/c2f0c2/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="caption">
        <img class="img-responsive" src="https://dummyimage.com/400x300/cc99ff/000">
        <div class="text-caption">
          <h3>This is some text</h3>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
          <button class="btn btn-primary center-block">Button</button>
        </div>
      </div>
    </div>

  </div>
</div>

    Example Bootply