Foros del Web » Creando para Internet » CSS »

Como colocar imagen en parte derecha encima de una imagen

Estas en el tema de Como colocar imagen en parte derecha encima de una imagen en el foro de CSS en Foros del Web. hola amigos, tengo una pagina en la cual se visualizan 4 imagenes requiero que encima de cada imagen se superponga otra al lado derecho @import ...
  #1 (permalink)  
Antiguo 05/10/2015, 10:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1.853
Antigüedad: 11 años, 9 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

Etiquetas: background, color, derecha, encima, html, parte, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:35.