How can I use Z-index to make the background of my div cards an image?

user_15093596 0
Viewed 68

I'm trying to make a landing page that has cards with background images that fix the size of the card, I want to use z-index so I can but a text/description section on top, however the z-index is not responding, by using max100% height & width the image is the same size of the div but its not indexing correctly, here's the code:

img {
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.container .card {
  background: lightgreen;
  color: black;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 285px;
  height: 145px;
  margin: 15px;
  border: 2px solid black;
  background-size: cover;
}
<div class="feed">
  <div class="card">
    <img src="https://c4.wallpaperflare.com/55/365/257/.jpg" alt="">
    <div class="card-description">
      <h5>Title of Post</h5>
      <img src="" alt="text">
      <p> Some text here.</p>
    </div>
  </div>
  <div class="card">
    <img src="" alt="">
    <div class="card-description">
      <h5>Title of Post</h5>
      <img src="" alt="text">
      <p> Some text here.</p>
    </div>
  </div>
</div>

flexbox css-position css-selectors css html
1 Answers

you need to put something like:

.card {
   position: relative;
}

.card .card-description {
   position: absolute;
   z-index: 2;
}
user_34345340
Related