Как добавить градиент к фотографии?

Question

[Алексей Королёв]

Есть такой код для краткой новости DLE (ниже), как сделать чтобы градиент был поверх изображения?

<div class="col-sm-4">
<div class="card card-inverse">
 <img class="card-img filter" src="{image-1}">
  <div class="card-img-overlay">
    <h4 class="card-title">{title}</h4>
    <p class="card-text">{short-story limit="100"}</p>
    <p class="card-text"><small class="text-muted">{date}</small></p>
  </div>
</div>
</div>
<style>
    .filter {
      background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
      height: 100%;
}
</style>

Comments

[Moskus]

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

[Алексей Королёв]

Moskus, а как это будет выглядеть на деле?

[Moskus]

Алексей Королёв, вы хотите, чтобы кто-то написал за вас код? Не думаю, что я хочу это делать.
Но вот вам статья с примерами: https://peter.coffee/how-to-use-css-pseudo-element...

Answer 1

[Максим]

Вот так можно добавить градиент к фото : https://codepen.io/topicstarter/pen/xWadVQ
но рекомендую обратится к svg у которого фильтров для фото уйма

Comments

[Алексей Королёв]

https://atomograd.su/tours.html

Решение вроде как рабочее, но почему у меня не работает? Применил на блоках с новостями

[Максим]

Алексей Королёв, в твоём случае надо тать :

.card-img-overlay:before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(to left,rgba(255,20,10,.2),rgba(255,255,0,.4),rgba(255,0,0,.5));
}

вот что получится

[Алексей Королёв]

Максим Ленский,большое спасибо. Очень помог. Буду учится