Как сверстать данный блок?

Question

[Webber]

Подскажите как сверстать данный блок, чтобы картинка выходила за фон.



Картинка:
тут

Comments

[historydev]

- Где код?
- Что конкретно не получается?

[Aetae]

Сделать "фон" псевдоэлементом с z-index: -1.

Answer 1

[Вадим Освальд]

<div class="card">
  <img src="здесь ссылка на твое изображение" alt="Male" class="image" />
  <button class="button">
    Male
    <div class="circle">
      <span class="arrow">&gt;</span>
    </div>
  </button>
</div>

.button {
  position: absolute;
  bottom: 30px; 
  left: 50%;
  transform: translateX(-50%);
  width: 300px; /
  height: 60px; 
  background-color: #ff6f61;
  color: white;
  border: none;
  border-radius: 30px; 
  font-size: 16px; 
  font-weight: bold; 
  cursor: pointer; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 0 20px; 
}

.button:hover {
  background-color: #e65a4f; 
}

.button .circle {
  width: 40px; 
  height: 40px; 
  background-color: white;
  border-radius: 50%; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.button .circle .arrow {
  color: #ff6f61;
  font-size: 18px; 
  font-weight: bold; 
}

Поменяй значения в стилях на нужные, должно работать

Comments

[Webber]

https://jsfiddle.net/p67mbe0c/

Answer 2

[QSnake]

Использовать свойство z-index
и position: absolute;

Как бы я сделал:

Answer 3

[Виталий Першин]

Например так: