.fade-in-image#n1{
width:500px;
height:500px;
opacity: 100%;
z-index: 0;
position: absolute;
transition: opacity 2s;
display:block;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
}
.fade-in-image#n1:hover {
width:500px;
height:500px;
opacity:0%;
transition:opacity 2s;
position: absolute;
z-index: 0;
display:block;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
}
.fade-in-image#n2{
width:500px;
height:500px;
opacity: 0%;
transition: opacity 2s ease 0s;
z-index: 1;
position: absolute;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
display:block;
}
.fade-in-image#n2:hover {
width:500px;
height:500px;
opacity:100%;
transition: opacity 2s ease 0s;
z-index: 1;
position: absolute;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
display:block;
}
/* the code I want to get working
.fade-in-image#n3{
width:500px;
height:500px;
opacity:0%;
transition:opacity 2s ease 1s;
z-index: 2;
position: absolute;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
}
.fade-in-image#n3:hover {
width:500px;
height:500px;
opacity:100%;
transition:opacity 2s ease 0s;
z-index: 2;
position: absolute;
background-image: url("../../images/overlay.png");
background-color: rgba(19, 21, 25, 0.5);
border-radius: 4px;
}*/
2.html