I cant figure out how to make the 2nd image fade to the 3rd image after a set amount of seconds of hovering your mouse over the image, if I try the current code, it fades to the 3rd image without fading to the 2nd first

[NicholasPM]

.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