Snippets Collections
<div>
  <div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<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%;
}
<h1>The z-index Property</h1>

<div ></div>

<p>Because the image has a z-index of -1, it will be placed behind the heading.</p>


/*css*/
h1 {
 position:absolute;
 z-idex: ;
}
div{
  background-image:url(https://picsum.photos/200);
  width:100px;
  height:140px;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
p {
position:absolute;
 z-index: ;
}
star

Wed Dec 01 2021 16:20:54 GMT+0000 (Coordinated Universal Time) https://www.youtube.com/watch?v=myEsMzsJEFg&t=62s

#css #html #z-index
star

Mon Nov 29 2021 23:44:23 GMT+0000 (Coordinated Universal Time) https://es.stackoverflow.com/questions/499239/transici%c3%b3n-css-de-background-image/500273#500273

#css #html #z-index
star

Sun Nov 28 2021 20:37:18 GMT+0000 (Coordinated Universal Time) https://css-tricks.com/almanac/properties/z/z-index/

#css #html #z-index

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension