como podria hacer esto? o si teneis algun ejemplo a mano

[gachon]

Hola que tal.
Me gustaria mostrar el siguiente esquema de imagenes, pero no se como hacerlo.
1-una imagen fotografia, vendria de la base de datos, aunque lo de la base de datos no importa,,
2-otro imagen png, enciama de la fotografia de la BD, esa imagen png, voy a intentar que sea trasparente para que se vea los bordes solos con las sombras para la fotografia y se vea debajo la fotografia y encima esta la de los bordes.

3-encima de esta dos imagenes poner textos

como podria resolver esto, es complicado??
sabeis de algun ejemplo??
Muchas gracias.
saludos

[cristian_cena]

Hola gachon, es simple, solo debes usar la propiedad z-index.

Código HTML:

<div class="padre_capas">
<div class="foto"></div> <!--o bien: <img class="foto" src="ruta/archivo.xxx">-->
<div class="png"></div>
<div class="texto"></div>
</div>
 

Código CSS:

/*al contenedor de las capas con z-index le damos position:relative; porque usamos position:absolute en las capas hijas, de este modo éstas tomaran como referencia al eje de coordenadas 0,0 (esquina sup-izq) de la capa .padre_capas*/
.padre_capas{position:relative; width:...; height:...;}
 
/*para que z-index funcione las capas en cuestión deben estar posicionadas en relative, absolute, o fixed*/
.foto, .png, .texto{position:absolute; width:...; height:...; display:block; top:0; left:0;}
 
/*Para que z-index funcione se debe aplicar esta propiedad a las capas que son hermanas entre si*/
.foto{z-index:1; background-image:url('ruta/archivo.xxx');}/*si usaste <img> pues no le des background*/
.png{z-index:2; background-image:url('tupng.png');}
.texto{z-index:3;}
 

Espero te sea útil, un abrazo.

[cristian_cena]

se me pasó...
si traes las urls de las imagenes de la base de datos, tal vez te sea útil aplicar los estilos en la misma etiqueta, por ejemplo:

Código ejemplo:

<div class="foto" style="background-image:url('<?php echo $laimagen;?>');"></div> 
<!--o bien: <img class="foto" src="ruta/<?php echo $laimagen;?>">-->
 

Saludos.

[gachon]

muchas muchas gracias, voy a intentar hacerlo.
Ha sido un gran detalle tu explicacion.
saludos y un gran abrazo.