Каким образом можно создать верстку для этого блока?

Чтобы создать верстку для блока с изображением, которое выходит за пределы фона, вы можете использовать HTML и CSS. Ниже приведен пример кода, который демонстрирует один из способов достижения этого эффекта.

### HTML
```html
<div class="container">
    <div class="content">
        <h1>Заголовок блока</h1>
        <p>Какой-то текст внутри блока.</p>
    </div>
    <img src="image.jpg" alt="Описание изображения" class="background-image">
</div>
```

### CSS
```css
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.container {
    position: relative;
    overflow: hidden; /* Скрывает элементы, выходящие за пределы контейнера */
    padding: 20px; /* Внутренние отступы для контента */
    background-color: #f0f0f0; /* Цвет фона контейнера */
}

.content {
    position: relative; /* Позволяет контенту быть поверх изображения */
    z-index: 2; /* Устанавливает порядок отображения для контента */
}

.background-image {
    position: absolute;
    top: 50%; /* Центрируем изображение по вертикали */
    left: 50%; /* Центрируем изображение по горизонтали */
    width: 120%; /* Увеличиваем изображение за пределы фона */
    height: auto; /* Сохраняем пропорции изображения */
    transform: translate(-50%, -50%); /* Перемещаем изображение в центр */
    z-index: 1; /* Устанавливаем порядок отображения для изображения */
}
```

### Описание кода:
1. **HTML-структура**: Создан контейнер с контентом и изображением. Контент — это текстовый блок, который будет виден сверху.

2. **CSS-стили**:
    - Устанавливаем `overflow: hidden;`, чтобы скрыть часть изображения, выходящую за пределы контейнера.
    - Устанавливаем `position: relative;` для контейнера и контента, чтобы иметь возможность управлять позиционированием элементов внутри.
    - Устанавливаем `position: absolute;` для изображения, чтобы оно могло выходить за пределы контейнера. При этом используем `transform: translate(-50%, -50%);`, чтобы отцентрировать изображение.
    - Увеличиваем ширину изображения до 120% (можно варьировать это значение в зависимости от желаемого эффекта).

Таким образом, изображение будет выходить за пределы фона контейнера, создавая желаемый эффект. Вы можете изменить размеры и отступы в зависимости от вашего дизайна и макета.

<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; 
}
 
 
 Поменяй значения в стилях на нужные, должно работать

Использовать свойство z-index  
 и position: absolute ; 
 
 Как бы я сделал: 

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