CODEWITHSUNDEEP
htmlcssreactjs
Joeman
Joeman

Reputation: 251

I am trying to position an info box over an image but still have both stay inside the container

I have tried things like using position absolute on one and position relative on the other but it always messes up one so that it overflows even though i have set overflow to hidden. This is my code so far.(ignore the fact that it says className and not class)

<div className="card">
      <div className="img">
        <img src={props.image} alt="" />
      </div>
      <div className="infoContainer">
        <h2>{props.title}</h2>
        <h3>{props.description}</h3>
      </div>
    </div>

that is the jsx

.card {
  display: flex;
  width: 400px;
  height: 500px;
  background-color: blue;
  border-radius: 20px;
  margin-left: 20px;
  overflow: hidden;
}
.infoContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: aqua;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.img {
}

anyone have any ideas? Any help is much appreciated. This is the output of what i have so far im not sure what to do. Im trying to get the image to be where the dark blue is. The dark blue is where im trying to get the image to show up

Upvotes: 0

Views: 57

Answers (2)

Jon P
Jon P

Reputation: 19772

Set position:relative on the card. That way any contained elements with postion:absolute will be positioned relative to the card element

.card {
  width: 400px;
  height: 500px;
  background-color: blue;
  border-radius: 20px;
  margin-left: 20px;
  overflow: hidden;
  /*By settign this to relative, absolutely positioned
   descendant elements will be positioned relative to this
  */
  position: relative;
}

.infoContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-self: flex-end;
  align-items: center;
  justify-content: center;
  padding: 10px;
  /*Position the infoContainer*/
  position: absolute;
  /*Set it to the bottom*/
  bottom: 0;
  /*Bring it to the front*/
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
}

.img {}
<div class="card">
  <div class="img">
    <img src=https://www.fillmurray.com/400/500 alt="" />
  </div>
  <div class="infoContainer">
    <h2>Bill Murray</h2>
    <h3>Star of the classic film Garfield</h3>
    <!--<h2>{props.title}</h2>
    <h3>{props.description}</h3>-->
  </div>
</div>

Upvotes: 1

Mr Kowalski
Mr Kowalski

Reputation: 26

try using

position:relative;

for card. Then set .img (try using .img img{} if not working) properties to

position: absolute; 
top: 0vh;
width: 100%;

I hope it can be undersood :-)

Upvotes: 1

Related Questions