Как правильно наложить оверлей?

Question

[rnkmp]

Как правильно наложить оверлей?

CCS

.cards {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: 25px;
  gap: 25px;
  height: 563px;
}

.card {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 334px;
  height: 563px;
  top: 74px;
  color: white;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}

.card-film {
  background-image: url(../images/lot1.jpg);
}

.card-book {
  background-image: url(../images/lot2.jpg);
}

.card-picture {
  background-image: url(../images/lot3.jpg);
}

.card::before {
  content: "";
  position: absolute;
  padding: 0;
  width: 334px;
  height: 563px;
  top: 74px;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0.7;
  z-index: 1;
}

HTML

<section class="cards">

    <div class="card card-film">
      <p class="titlecard">Фильм режиссёра, который бросил киношколу</p>
      <p class="textcard">Не просто бросил, а ушел с первой лекции. Какой была ваша ставка, если бы вы не знали, что
        режиссер - Пол Томас Андерсон?</p>

    </div>

    <div class="card card-book">
      <p class="titlecard">Книга, где описан один скучный день из жизни рекламного агента</p>
      <p class="textcard">Объёмом почти в тысячу страниц. Иногда без знаков препинания и с переходами на
        древнеанглийский. В ней одновременно рассказывается о 16 июня 1904 года и об истории литературы, начиная с
        античных времён. И это всё накладывается на эпическую поэму Гомера. Сколько бы вы поставили на «Улисса» Джеймса
        Джойса?</p>

    </div>

    <div class="card card-picture">

      <p class="titlecard">Картина, которую повторит даже 5-летний сын маминой подруги</p>
      <p class="textcard">Ну действительно, там линия, тут кружочек, а здесь и вовсе что-то похожее на
        инфузорию-туфельку. Никаких полей, лесов, котиков... Сколько бы вы на такое поставили, если бы не знали, что это
        — одна из революционных работ Кандинского?</p>

    </div>

  </section><img src="https://habrastorage.org/webt/66/f5/61/66f5616b0b29f330750160.jpeg" alt="image"/>

Comments

[Maksym Sahaidak]

да, щас, секунду, какой вопрос такой ответ - как то.

распиши нормально что нужно и где нужно, а не ляпни огромный тяп кода, с которым не понять что делать.

Answer 1

[Данила]