Como colocar imagen en parte derecha encima de una imagen

[Montes28]

hola amigos, tengo una pagina en la cual se visualizan 4 imagenes requiero que encima de cada imagen se superponga otra al lado derecho

Código CSS:

body, html { height:100%; 
    margin:0; 
    padding:0;
    width:100%; 
    background-color:silver;
    }
 
#grande{ width:100%;
    height:100%;    
    margin:0;     
    text-align:center;
    }
#uno{ width:50%;
    display:inline-block;     
    margin:auto;     
    height:50%;
    position: relative;    
    overflow:hidden;
    }
#dos{ width:50%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }
#tres{ width:50%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    }
#cuatro{ width:50%;
    display:inline-block;
    height:50%;    
    overflow:hidden;
    } 
 
.img{ width:100%; 
     height:100%;
    }
 

Código HTML:

<div id="grande">
      <div id="uno"><img class="img" src="img1" ></div><div id="dos"><img class="img" src="img2"></div>
      <div id="tres"><img class="img" src="img3"></div><div id="cuatro"><img class="img" src="img4"></div>
    </div>
 

hasta el momento lo hice asi:

Código CSS:

#estado1{
    position: absolute; bottom: 0px; right: 0px;
}
 
#estado2{
 
    position: absolute; bottom: 0px; right: 0px;
}
 
#estado3{
    position: absolute; top: 42.8%; right: 0px;
 
}
 
#estado4{
    position: absolute; bottom: 0px; left: 45%;
 
}
 

Código HTML:

<div id="grande">
      <div id="uno"><img class="img" src="img1" ><img src="img/{{ $img }}" id="estado1"  height="64" width="64"></div><div id="dos"><img class="img" src="img2"><img id="estado2" src="img/{{ $img }}"  height="64" width="64"></div>
      <div id="tres"><img class="img" src="img"> <img src="img/{{ $img }}" id="estado3"  height="64" width="64"></div><div id="cuatro"><img class="img" src="img3"><img src="img/{{ $img }}" id="estado4" height="64" width="64"> </div>
    </div>
 

pero necesito que se alinea de acuerdo al div que lo contiene. lo puedo mejorar?