Overlay for a grid item

user_14326852 0
Viewed 504

I am using React and I am trying to have an overlay over each grid item in a grid. But, what all I try, the overlay seems to come below each grid item and not over the grid item. Even if I use the position: absolute it is not working !

Here's the code I am using for the grid (React):

  <div className="home__itemSection">
     <div className="item">
  <div className="item__container">
    <div className="container__imageDiv">
      <img
        src={""}
        alt=""
      />
    </div>

    <div className="container__detailSection">
      <p>{""}</p>
      <h6>{""}</h6>
    </div>
  </div>

  <div className="item__overlay">
    <h1>{""}</h1>
    <h1>{""}</h1>
  </div>
</div>
  </div>

css:

.home__itemSection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 30px 170px 0 170px;
  transition: ease all 0.5s;
}

.item {
  background-color: #f1f1f1;
  height: 350px;
  width: 212px;
  margin: 0 3rem 1rem 3rem;
  height: fit-content;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: flex-start;
}

.container__imageDiv {
  height: 318px;
  width: 212px;
}

.container__imageDiv > img {
  height: 318px;
  width: 212px;
}

.container__detailSection {
  height: 44px;
  width: 212px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 5px;
}

.container__detailSection > p {
  color: black;
  font-size: 13px;
  font-weight: 300;
  line-height: initial;
}

.container__detailSection > h6 {
  padding-left: 1.8rem;
  font-weight: 500;
  font-size: 1rem;
}

.item__overlay {
  height: 252px;
  width: 212px;
  background-color: black;
}

Any help is greatly appreciated !
Thank You !

css-grid reactjs css
2 Answers

Please add position: relative; on item(parent tag of overlay)

.item{
 position: relative;
}
.item .item__overlay{
   position: absolute;
   left: 0;
   top: 0;
}
user_149795860

An element with position absolute is relative to the next parent element with relative (or absolute) positioning.

Add position relative to home__itemSection. Also use height and with to cover all the container:

.home__itemSection {
 ...
  position: relative;
}

.item__overlay {
  ...
  position: absolute;
  height: 100%;
  width: 100%;
}
user_143498080
Related