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

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

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

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

.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>
0
Kevin 17 Апр 2020 в 07:06

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/ карта - парить - 5n0yf файл = / index.html : 450-461

enter image description here

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

1
Rahul 17 Апр 2020 в 05:38

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

< Сильный > 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

1
o q 17 Апр 2020 в 10:15