Efecto de transición de background(transition, opacity)

PHOTO EMBED

Mon Nov 29 2021 23:44:23 GMT+0000 (UTC)

Saved by @samn #css #html #z-index

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

// css 

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%;
}
content_copyCOPY

*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í). --- el razonamiento es: sacar del flujo todo los items de la caja flex, para luego posicionarlo según su orden con "left" y %; luego para evitar la transición brusca de hover(width 25=>100) usar opacity , que aparentara suavidad en el transito. NO SE debe transicionar left, ya que sera un movimiento brusco." dejamos que left suceda instantáneamente y usamos opacity para suavisar :D" -- El problema que tuve con position Absolute; respuesta es: La razón porque position:absolute; se comportaba así, es que al ser absoluto sale del flujo normal, y se ubica en el origen de su contenedor, sobrando 3 "columnan" con display flex que se ubican en el origen del contenedor, ya que solo quedan 3 respetando el flujo. --Algo más:: las opciones binarias, no intervalos, no se pueden transicionar. Esta es la misma razón por la que no puede realizar la transición entre display: none;y display: block;(por ejemplo): no hay fases intermedias para usar como transiciones.

https://es.stackoverflow.com/questions/499239/transici%c3%b3n-css-de-background-image/500273#500273