0

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?

1 respuesta 1

1

El problema es que la imagen no detecta el hover porque está debajo de la capa del filtro. Es esta capa la que si detecta el paso del ratón.
Una solución es usar un selector compuesto del filtro hover y la imagen.
Cambia la última regla CSS (.main-article-blog img:hover) por esta otra

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

Como ves el hover lo aplicas digamos a main-article__filter y actúa sobre img, que un bloque hermano del main-article__filter
Si quieres puedes verlo funcionando en este ejemplo

1
  • Perfecto, justo lo que buscaba, muchas gracias Juan Commented el 4 ago. 2022 a las 9:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.