Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/10/2015, 10:21
Montes28
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 11 años, 10 meses
Puntos: 6
Como colocar imagen en parte derecha encima de una imagen

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:
Ver original
  1. body, html { height:100%;
  2.     margin:0;
  3.     padding:0;
  4.     width:100%;
  5.     background-color:silver;
  6.     }
  7.  
  8. #grande{ width:100%;
  9.     height:100%;    
  10.     margin:0;    
  11.     text-align:center;
  12.     }
  13. #uno{ width:50%;
  14.     display:inline-block;    
  15.     margin:auto;    
  16.     height:50%;
  17.     position: relative;    
  18.     overflow:hidden;
  19.     }
  20. #dos{ width:50%;
  21.     display:inline-block;
  22.     height:50%;    
  23.     overflow:hidden;
  24.     }
  25. #tres{ width:50%;
  26.     display:inline-block;
  27.     height:50%;    
  28.     overflow:hidden;
  29.     }
  30. #cuatro{ width:50%;
  31.     display:inline-block;
  32.     height:50%;    
  33.     overflow:hidden;
  34.     }
  35.  
  36. .img{ width:100%;
  37.      height:100%;
  38.     }

Código HTML:
Ver original
  1. <div id="grande">
  2.       <div id="uno"><img class="img" src="img1" ></div><div id="dos"><img class="img" src="img2"></div>
  3.       <div id="tres"><img class="img" src="img3"></div><div id="cuatro"><img class="img" src="img4"></div>
  4.     </div>

hasta el momento lo hice asi:

Código CSS:
Ver original
  1. #estado1{
  2.     position: absolute; bottom: 0px; right: 0px;
  3. }
  4.  
  5. #estado2{
  6.  
  7.     position: absolute; bottom: 0px; right: 0px;
  8. }
  9.  
  10. #estado3{
  11.     position: absolute; top: 42.8%; right: 0px;
  12.  
  13. }
  14.  
  15. #estado4{
  16.     position: absolute; bottom: 0px; left: 45%;
  17.  
  18. }


Código HTML:
Ver original
  1. <div id="grande">
  2.       <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>
  3.       <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>
  4.     </div>


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

Última edición por Montes28; 05/10/2015 a las 10:51