Estoy intentando realizar un efecto de transición dentro de un artículo que contiene un enlace general con textos e imágenes. El efecto de transición sería sobre la imagen, solo que al tener una imagen con degradado como diseño justo encima de la imagen a la que quiero hacer la transición no consigo hacerlo.
.main-article-blog {
height: 440px;
overflow: hidden;
transition: all .25s ease;
width: 375px;
position: relative; /*Obligatorio*/
}
.main-article-blog .main-article__filter { /*Filtro sobre imagen y textos*/
background: linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,.6) 35%,transparent 50%,transparent);
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.main-article-blog .text-block {
position: absolute;
bottom: 20px;
left: 0px;
text-align: center;
background-color: black;
color: white;
transition: all .25s ease;
}
.main-article-blog img {
height: 440px;
border: 1px solid orange;
transition: all .45s ease-out;
}
.main-article-blog img:hover {
width: auto;
height: 470px;
}
<article class="main-article-blog">
<a class="blog-link main-article__meta" href="/blog/cómo-preparar-una-pared-para-pintarla?">
<span class="main-article__filter"></span> <!-- Imagen que contiene el degradado -->
<section class="text-block">
<span class="main-article__date">04/08/2022</span>
<h1 class="main-article__title" >
¿Título entrada del blog?
</h1><p class="main-article__description">Descripción del artículo principal de las entradas del blog.</p>
</section>
<img src="https://via.placeholder.com/300" alt="Título">
</a>
</article>
Si del código html elimino el filtro degradado "... " la transición se hace correctamente pero claro es una parte del diseño que me piden y tengo que dejar.
¿Qué otra opción podría intentar?