How to create transparent text box overlay at the bottom for all 3 aligned images

Question

I'm trying to create a transparent text box overlay on my image gallery.

I've tried to create a semi transparent text box overlay, however, the semi transparent box doesn't align at the bottom of the image.

.articles-detail {
    position: absolute;
    display: block;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.6);
    color: #f1f1f1;
    width: calc(33.33% - 100px);
    padding: 1px;
    text-align: center;
    z-index: 1;
}

Here is the code:
https://codepen.io/usernametakenchooseanother/pen/agNyKM

Here's what I wanted it too look like:
Example 1
Example 2

Answer 1

You must make the parent's position of postion:relative by doing that it makes an absolute elmemt position relative to the parent element when using position: absolute in the child elemnthand change the bottom position of the picture details. By

.column {

      position:relative;
      flex: 33.33%;
      padding: 50px;
    }

    .articles-detail {
        position: absolute;
        display: block;
        bottom: 55px;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.6);
        color: #f1f1f1;
        width: calc(33.33% - 100px);
        padding: 1px;
        text-align: center;
        z-index: 1;
    }

Answer 2

Add a wrapper relative span around the image and text.

Add the following CSS

.wrapper {
  position: relative;
}

.articles-detail {
  width: 100%;
}

 * { box-sizing: border-box; } .row { display: flex; } /* Create three equal columns that sits next to each other */ .column { flex: 33.33%; padding: 50px; } .articles-detail { position: absolute; display: block; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6); color: #f1f1f1; width: calc(33.33% - 100px); padding: 1px; text-align: center; z-index: 1; } /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column { width: 100%; } .featured-image-container { height: 300px; } } .wrapper { position: relative; } .articles-detail { width: 100%; } 

 <div class="row"> <div class="column"> <span class="wrapper"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"> <div class="articles-detail"> <h1> Title </h1> <h3> Seconds </h3> </div> </span> </div> </div> </body> </html> 

Answer 3

If you don't want to use media query then you can use the bootstrap template so you can make responsive with your requirement.

Grid System of Bootstrap 4: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

Template of Bootstrap 3: https://www.w3schools.com/bootstrap/bootstrap_templates.asp

You can do that template using Bootstrap 4

Answer 4

You can see my code in demo: https://codepen.io/phuongnm153/pen/ewZPbY

You should change css:

.column {
  flex: 33.33%;
  margin: 50px;
  position: relative;
}

.articles-detail {
    position: absolute;
    display: block;
    bottom: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: #f1f1f1;
    width: 500px;
    text-align: center;
    z-index: 1;
}

Answer 5

You can use flex for containers and absolute positions for img, text.

 * { box-sizing: border-box; } .row { height: 300px; display: flex; flex-direction: row; flex-wrap: wrap; } /* Create three equal columns that sits next to each other */ .column { margin: 0 30px 30px 0; height: 100%; width: 300px; position: relative; display: flex; } .img-wrap { position: relative; overflow: hidden; width: 100%; height; 100%; } img { position: absolute; left: -50%; max-height: 300px; } .articles-detail { position: absolute; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.6); color: #f1f1f1; padding: 1px; text-align: center; } 

 <div class="row"> <div class="column"> <div class="img-wrap"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"> </div> <div class="articles-detail"> <h1> Title </h1> <h3> Second </h3> </div> </div> <div class="column"> <div class="img-wrap"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"> </div> <div class="articles-detail"> <h1> Title </h1> <h3> Second </h3> </div> </div> <div class="column"> <div class="img-wrap"> <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500"> </div> <div class="articles-detail"> <h1> Title </h1> <h3> Second </h3> </div> </div> </div>