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