Изображение накладывается на контейнер с содержимым

Question

Как лучше всего разместить изображение поверх карты с содержимым под ней?

Я пробовал отрицательные поля, но мне не повезло с этим подходом.

Я приложил изображение того, на что я смотрю и чувствую:

Вот моя попытка кода

.card {
  text-decoration: none;
  margin-right: 20px;
  text-align: center;
}

.card__section {
  overflow: hidden;
  padding-bottom: 50px;
  display: block;
  position: relative;
}

.card__inner {
  background: black;
  padding: calc(35px + 30%) 35px 35px;
  color: white;
  width: 100%;
  display: block;
  position: relative;
}

.card__image {
  width: 80%;
  height: auto;
  margin: 0 auto -30%;
  position: relative;
  z-index: 1;
}

<a href="#" class="card">
        <section class="card__section">
          <img
            class="card__image"
            src="http://via.placeholder.com/340x220"
            alt=""
          />
          <div class="card__inner">
            <h1>
              This is a static template, there is no bundler or bundling
              involved!
            </h1>
          </div>
        </section>
      </a>

Answer 1

Ты почти у цели! Есть две вещи, которые необходимо обновить:

1. Удалить лишние % в .card__image

.card__image {
  width: 80%;
  height: auto;
  margin: 0 auto -30%%;  // <-- Remove extra % at the end.
  position: relative;
  z-index: 1;
}

2. Настройте padding в .card__inner из-за отрицательного поля для предыдущего элемента.

.card__inner {
  background: black;
  // Update padding to below. Negative margin on previous element needs to be added to the top padding.
  padding: calc(35px + 30%) 35px 35px;  
  color: white;
  width: 100%;
  display: block;
  position: relative;
}

Песочница: https://codesandbox.io/s/card-hover-wiilf

Answer 2

вам нужно добавить ниже css

.card__section {
  overflow: visible;
}
.card__image {
  margin-bottom: 20px;
  margin-top: -100px;
}
section.card__section {
    margin-top: 60px;
}

и поместить ваше изображение в card__inner div

см. https://codesandbox.io/s/card-hover-5n0yf?file= / index. html: 450 -461

надеюсь, это поможет