Question

Hola.

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.

<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>

.main-article-blog {
    height: 440px;  
        overflow: hidden;
        transition: all .25s ease;
    width: 300px;
       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;    
}

Si del código html elimino el filtro degradado la transición se hace correctamente <span class="main-article__filter"></span> pero claro es una parte del diseño que me piden y tengo que dejar.

¿Qué otra opción podría intentar?

Saludos.

Answer 1

Hola de nuevo.

Finalmente lo he logrado utilizando un "selector de hermanos generales con el combinador ~

Cambiando esto

/*.main-article-blog img:hover {        

      width: auto;
      height: 470px;

}*/

por esto

.main-article-blog .main-article__filter:hover ~img{    
      width: auto;
      height: 470px;    
}

Espero que le pueda servir a alguien más.

Saludos.