Как наложить цвет поверх изображения?

Question

Помогите наложить цвет #3A3310 с 37% заливкой. Все перебрал и никак не отображается(( Важно чтобы заголовок оставался поверх заливки - кликабельный. Пример и код прикрепляю)

.block-b1 {
  position: absolute;
  justify-content: center;
  display: flex;
  width: 628px;
  height: 300px;
  overflow:hidden;
}

.h2-block {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    position: absolute;
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 41px;
    color: white;
    text-transform: uppercase;
    display: flex;
    z-index: 1
}

.photo-card {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background: rgba(30, 144, 255, 10);
}

.block-b1 img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
 
.block-b1 img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

.block-b1 img{
  background: #fff;
}

<div class="block-b1">
                    <h2 class="h2-block">
                        Личный водитель
                    </h2>
                    <img class="photo-card" src="https://img3.goodfon.ru/wallpaper/nbig/4/85/aerodrom-vzletnaya-polosa-3804.jpg" alt="">
                </div>

Answer 1

Так ?

* {
  margin: 0;
  padding: 0;
}

.block-b1 {
  width: 628px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.h2-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: bold;
  font-size: 26px;
  color: white;
  z-index: 10;
}

.photo-card {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.block-b1 img {
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.block-b1:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.block-b1:after {
  content: "";
  background: #3a3310;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  opacity: 0.37;
}

<div class="block-b1">
  <h2 class="h2-block">Личный водитель</h2>
  <img class="photo-card" src="https://img3.goodfon.ru/wallpaper/nbig/4/85/aerodrom-vzletnaya-polosa-3804.jpg" alt="">
</div>

Answer 2

Важно чтобы заголовок оставался поверх заливки - кликабельный.

Использовал прозрачный градиент поверх изображения

background:
    linear-gradient(gold,#CFA0E9,transparent) top/100% 60vh no-repeat,
    url(https://img3.goodfon.ru/wallpaper/nbig/4/85/aerodrom-vzletnaya-polosa-3804.jpg) center/cover;

Цвет подбирается по своему вкусу

При наведении на текст он увеличивается, но остается кликабельным (переход на ваш профиль)

.block-b1 {
  min-height:900px;
  max-height:100vh;
  position: relative;
  overflow: hidden;
  
  background:
    linear-gradient(gold,#CFA0E9,transparent) top/100% 80vh no-repeat,
    url(https://img3.goodfon.ru/wallpaper/nbig/4/85/aerodrom-vzletnaya-polosa-3804.jpg) center/cover;
}
.h2-block:hover {
-webkit-transform: scale(1.3);
 -moz-transform: scale(1.3);
 -o-transform: scale(1.3);
 color:crimson;
 
}

.h2-block {
position: absolute;
  top: 30%;
  left: 50%;
  white-space: nowrap;
  font-weight: bold;
  font-size: 26px;
  color: white;
  -moz-transition: all 0.4s ease-out;
 -o-transition: all 0.4s ease-out;
 -webkit-transition: all 0.4s ease-out;
  z-index: 10;
}

<div class="block-b1" >
                   <a href="https://ru.stackoverflow.com/users/432161/dobr">
                    <h2 class="h2-block">
                        Личный водитель
                    </h2>
                    </a>
                </div>

БЛОГ НА HUSL

Как наложить цвет поверх изображения?

Ответы (2 шт):