1

quiero animar la transición de cambio de imágenes. Tengo cuatro columnas que cuando se hace hover en cada una de ellas muestra una imagen diferente con un after. Lo que quiero es que tenga una transición de imagenes. He visto que no se puede realizar una transición a la propiedad background-image.

este sería el código:

.skt-hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: var(--backgroundImg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.skt-hero:hover{
    background-image: none;
}

.skt-hero .columnas {
    width: 25%;
    border: 1px solid gray;
    background-color: transparent;
    transition: background-color 0.3s;
    
}



.columnas:hover {
    color: white;
    background-color: transparent;
    background-color: red;
}

.columnas:hover:after {
    background-image: var(--backgroundImg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    
}
<div class="skt-hero" style="--backgroundImg: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg)">
        <div class="columnas" style="--backgroundImg: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg)">hola</div>
        <div class="columnas" style="--backgroundImg: url(/img/playa-de-isuntza-lekeitio__1280x720.jpg)">hola</div>
        <div class="columnas" style="--backgroundImg: url(/img/shutterstock_510679489-scaled.jpg)">hola</div>
        <div class="columnas" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">hola</div>
    </div>

Muchas gracias por la ayuda.

2
  • No entiendo que buscas, ¿Quieres que cuando se pose el mouse en cada una de las ".columnas" aparezca una imagen diferente, en el div(.columnas) o en el div(padre)?
    – kraud
    el 27 nov. 2021 a las 19:33
  • Si en el div padre, eso ya está, con el código que he puesto ya se consigue, lo que quiero ahora es que la transición del cambio de imagen sea suave y no se como animar una background image. Gracias. el 28 nov. 2021 a las 11:08

1 respuesta 1

1

La verdad no termino de entender que es lo que buscabas agarre el código y le introduje algunos efectos: me tardo resolverlo porque aun no entendía algunas cosas que creía que entendía. LO QUE NECESITÉ ENTENDER BIEN PARA RESOLVER ESTO SON:

  • z-index(que parece muy simple)
  • transition( no transiciona propiedades sin intervalo(), hay una lista de las propiedades que trancisiona)
  • opacity( puede disimular transiciones bruscas)
  • entender selectores y hover para influir en un elemento haciendo hover en otro elemento( con eso creo que se puede reducir el código css que escribí).

Bueno, ahí te dejo el código; espero que se solucione tu duda.

body{
z-index: -10:
} /* para asegurar que nadie este por debajo de body*/
.skt-hero {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url(https://haciendofotos.com/wp-content/uploads/las-mejores-fotos-de-paisajes-2020.jpg);
    background-size: cover;
}
.skt-hero:hover{
    z-index:-3;
}
.columnas {
    width: 25%;
    height: 100%;
    border: 1px solid gray;
    background-color: transparent;
    position:absolute;
    opacity: 0.05;
    transition: opacity 2s ease;
}
.columnas:hover {
    height: 100%;
    width:100vw;
    background-image: var(--backgroundImg);
    position: ;
    z-index: -1;
    background-size: cover;
    opacity: 1;
}
.z1{
left:0%;
}
.z1:hover{
left:0%;
}
.z2{
left:25%;
}
.z2:hover{
left:0%;
}
.z3{
left:50%;
}
.z3:hover{
left:0%;
}
.z4{
left:75%;
}
.z4:hover{
left:0%;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas z1" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">1ahola</div>
<div class="columnas z2" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">2a</div>
<div class="columnas z3" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.jpg)" >3a</div>
<div class="columnas z4" style="--backgroundImg: url(https://st.depositphotos.com/1012061/4434/i/600/depositphotos_44342021-stock-photo-sun-rays-inside-coconut-palms.jpg)">4a</div>
</div> <!-- Fin del contenedor -->

NOTA1: hay que esperar un poco para que las imágenes carguen y funcionen bien(tomo cualquier imagen). NOTA2 Cuando pregunten, no peguen el código del proyectó en el que están; cojan los problemas que no entienden y pónganlos en un ejemplo simple y claro, aclarando las partes que pueden ser confusas o que no son tan comunes. --- eso para que más personas lo intenten y también otras que recién empiezan a programar se animen a resolverlo al ver un código entendible.

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.