<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%; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter