How to create layout that same with layout in this picture in CSS

Question

How to create a layout show image box and text box in front of the image boxes in the same with the layout in this picture:

Thank you very much.

.issue_item {
  width: 150px;
  height: 300px;
}

.issue_item.not_image {
  width: 150px;
  height: 300px;
  background-color: #FF3800;
}

.issue_item {
  width: 100%;
  height: 100%;
}

.issue_item .issue_item_image {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
}



  
    
      
      B BRAND
      C BRAND
      D BRAND
      E BRAND

user_17697272 · Answer

I might try using a flexbox instead of a table.

.issue_item{
       flex: 1 0 0;
    }
.flex-container{
    display: flex;
}

The text bubbles in front can be positioned using

position:absolute

user_4304400 · Answer

.issue_row>th {
  height: 40px;
  background-color: #111111;
  color: white;
  text-align: center;
}

.issue_table {
  background-color: #111111;
}

.issue_item {
  width: 150px;
  height: 180px;
}

.issue_item_image {
  max-width: 100%;
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.issue_item.not_image {
  width: 150px;
  height: 180px;
  background-color: #FF3800;
}




  
    
      
      B BRAND

      C BRAND

      D BRAND
      E BRAND

Here's how you do it. You can also check this JS fiddle

user_17707830 · Answer

If you are using bootstrap5, this already work with display flex. So, no need for any extra CSS. Just try this one-

Here is some little css-

#section {
        background-color: #fe0;
        min-height: 100vh;
    }
    #section .box img {
        max-width: 100%;
    }
    #section .container>.row {
        border: 4px solid #000;
    }
    #section .container>.row .box {
        border-left: 4px solid #000;
    }
    #section .bg-active {
        background-color: #FF3800;
    }

How to create layout that same with layout in this picture in CSS

3 Answers