Расположение круга img с перекрытием div

Question

Я сейчас изучаю React, поэтому собираю простой поисковый сайт. Где можно искать ТВ-шоу с помощью API TVMaze.

Я пытаюсь поместить один img, перекрывающий div ниже, чтобы дать этот эффект: На данный момент у меня есть только это:

Теперь у меня вопрос, как сделать так, чтобы изображение перекрывалось так, как я хочу? Я «знаю», что мне следует использовать z-index, чтобы перевести одно над другим, но я не уверен, как затем переместить img поверх базового элемента div.

Это мое возвращение в моем render () в моем компоненте реакции:

    return (
  <div>
    {show.image !== null && (
      <div className="result-container">
        <img className="result-poster" src={show.image.medium} alt="" />

        <div className="result-card">
          <h2 className="result-title">{show.name}</h2>
          <div className="result-ratings">
            <i className="material-icons">star_border</i>
            <h3 className="result-rating">
              {show.rating.average === null && "N/A"}
              {show.rating.average !== null && show.rating.average}
            </h3>
          </div>
        </div>
      </div>
    )}
  </div>
);

И соответствующий ему scss:

.result-container {
width: 300px;
margin: 2rem;
display: flex;
flex-direction: row;
justify-content: space-around;
text-align: center;
.result-poster {
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
    width: 200px;
    z-index: 1;
    height: 50px;
    padding-top: 1rem;
    background: #eee;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    .result-ratings {
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    i,
    h3,
    h2 {
        margin: 0;
        font-size: 1rem;
    }
}

Также похоже, что изображение в img искажается каким-то образом, что я тоже не знаю, как "отменить".

Очень признателен за помощь, поскольку я новичок в этом виде развития.

Answer 1

Это css, если вам нужна дополнительная помощь, просто скажите мне.

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.result-container {
width: 300px;
margin: 2rem;
display: flex;
align-items: center;
.result-poster {
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
    width: 200px;
    z-index: 1;
    height: 80px;
    padding-top: 1rem;
    padding-left: 60px;
    padding-right: 20px;
    margin-left: -50px;
    background: #eee;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: flex;
    justify-content: flex-end;
    .result-ratings {
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    i,
    h3,
    h2 {
        margin: 0;
        font-size: 1rem;
    }
  }
}