El código hace que: cuando hagas hover en cada div de clase ".columnas" la imagen de fondo de su div padre cambiara. ----El problema es: Cuando haces hover de izquierda a derecha todo correcto; pero cuando lo haces al revés, es como si las ".columnas" se hubieran desplazado hacia la izquierda. ¿ Como hacer para que hover también funcione de derecha => izquierda?
NOTA1: al ejecutar, esperen un poco para que las imagenes carguen, tome cualquier imagen :).
NOTA2: en el código aparece "--backgroundImg" es una variable css para cada ".columna" en su estilo en linea, de tal forma que cuando sucede hover se pondrá su respectivo valor.
.skt-hero {
position: relative;
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{
background-image: none;
}
.columnas {
width: 25%;
border: 1px solid gray;
background-color: transparent;
}
.columnas:hover {
width: 100%;
height: 100%;
background-image: var(--backgroundImg);
position: absolute;
z-index: -1;
background-size: cover;
}
<div class="skt-hero"> <!--Inicia contenedor -->
<div class="columnas" style="--backgroundImg: url(https://cdn.thecoolist.com/wp-content/uploads/2016/05/Japanese-Cherry-beautiful-tree.jpg)">hola</div>
<div class="columnas" style="--backgroundImg: url(https://wallpaperstock.net/wonderful-trees-path-sun-light-wallpapers_47680_1920x1200.jpg)">hola</div>
<div class="columnas" style="--backgroundImg: url(https://img.culturacolectiva.com/featured_image/2018/10/04/1538678265674/deforestacion-del-bosque-amazonico-diecisiete-por-ciento.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> <!-- Fin del contenedor -->
NOTA3: Seria bueno que sea puro CSS; pero si no hay opción, la forma javascrip también será genial.