CSS Градиент в галерее изображений

Question

Я должен комментировать какой-то селектор или css ошибка. Цель состоит в том, чтобы применить градиент к 3 изображениям. Возможно? Это возможно только с css?

Ссылка для проверки: http://homeagent.angratres.com.br

<div id="kt-kinetic-posts__3f3ddc" class="wp-block-kioken-kinetic-posts ha-blog-nomob is-grid order-cat-title-meta aligncenter design-is-stacked-center">
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/home-office-e-oportunidade-para-empresas-na-contratacao-de-pcds/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1.jpg" class="attachment-large size-large wp-post-image" alt="Home office é oportunidade para empresas na contratação  de PcDs"
              srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-1-min-1-276x300.jpg 276w" sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/blog/">blog</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/home-office-e-oportunidade-para-empresas-na-contratacao-de-pcds/">Home office é oportunidade para empresas na contratação  de PcDs</a></h4>
        </div>
      </div>
    </div>
  </article>
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/reduza-custos-com-a-operacao-noturna/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min.jpg" class="attachment-large size-large wp-post-image" alt="Reduza Custos com a Operação Noturna" srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-3-min-276x300.jpg 276w"
              sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/ebook/">ebook</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/reduza-custos-com-a-operacao-noturna/">Reduza Custos com a Operação Noturna</a></h4>
        </div>
      </div>
    </div>
  </article>
  <article class="grid-post grid-3">
    <div class="grid-post-row imgzoom-default ">
      <div class="grid-image-area">
        <div class="post-image">
          <a href="http://homeagent.angratres.com.br/a-home-agent-e-1-no-ranking-das-startups-de-customer-service-do-brasil/"><img width="403" height="438" src="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min.jpg" class="attachment-large size-large wp-post-image" alt="A Home Agent é #1 no ranking das Startups de Customer Service do Brasil"
              srcset="http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min.jpg 403w, http://homeagent.angratres.com.br/wp-content/uploads/2020/02/Novo-Projeto-2-min-276x300.jpg 276w" sizes="(max-width: 403px) 100vw, 403px"></a>
        </div>
      </div>
      <div class="grid-content-area">
        <div class="title-meta-wrap">
          <div class="grid-content-category"><a href="http://homeagent.angratres.com.br/category/midia/">mídia</a></div>
          <h4 class="grid-content-title"><a href="http://homeagent.angratres.com.br/a-home-agent-e-1-no-ranking-das-startups-de-customer-service-do-brasil/">A Home Agent é #1 no ranking das Startups de Customer Service do Brasil</a></h4>
        </div>
      </div>
    </div>
  </article>
</div>

Пример:

пример

Answer 1

.post-image::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 100;
left: 0;
background: rgb(11,89,135);
background: -moz-linear-gradient(9deg, rgba(11,89,135,1) 24%, rgba(119,35,118,0.5270483193277311) 71%);
background: -webkit-linear-gradient(9deg, rgba(11,89,135,1) 24%, rgba(119,35,118,0.5270483193277311) 71%);
background: linear-gradient(9deg, rgba(11,89,135,1) 24%, rgba(119,35,118,0.5270483193277311) 71%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0b5987",endColorstr="#772376",GradientType=1);   

}

Answer 2

Я ценю вклад. Селектор и css поделились здесь.

Answer 3

show_bg_2 {

background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('images/background.jpg');
width: 80%;
height: 400px;
background-size: cover;

}

Попробуйте использовать этот код в качестве ссылки.