un div encima de otro

[fedefrankk]

Hola a todos quiero hacer una galeria done al pasar el maus sobre la foto me aparezca un div con un texto, cuando empese , me pasa lo siguiente:



el div que dice este, me baja todo y no esta encima de la foto..
el codigo es el siguiente:

HTML

Código HTML:

<div  class="galeria" id="txtHint"> 
<div class="contenedor_c">
<div class="transpa">este </div>
<form action="#" method="POST">
<div class="imagen_c" id="capa1">
<input type="image" src="usuarios/U/VZVRRhW5eZDO.jpeg" width="350" height="300" />
</div><!--imagen_c-->
<div class="pts_c"><?php echo "<font color='#008000' </font> "."<b>+</b>". $reg['usu];?></div><!--pts_c-->
<div class="des_c">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssweeeeeeeeeeeeeeeeeeeeessssssss</div>
 
 
</div> <!--contenedor_c--> 
</div>
</form>
 

y el CSS:

Código CSS:

.galeria{float:left; width:1124px;  background:#FFF:Transparent;border:1px solid #1EB6DF;
margin-top:1px }
 
 
 
.contenedor_c{ position:relative; display:inline-block; z-index:1;
margin:10px; margin-top:3px;
background-image:url(../_img/quo267x270_vacia_.png); /* ACA FOTO DETRAS PUBLICIDAD */ 
background-repeat:no-repeat;
width:350px; height:400px;
border:solid; border-width:1px; border-color:#666
}
 
 
.transpa{ position:relative; width:350px; height:60px;;border:2px solid #F00; z-index:5; clear:both}
.imagen_c{ position:relative; z-index:2; border:solid; border-width:2px; border-color:#FFF;
width:352px; height:256px; margin-left:4px;}
.pts_c{float:left; font-family:Tahoma; font-size:12px;
 
  text-align:left;
  margin-top:85px;
  margin-left:270px;
 
  }
  .des_c{float:left;font-family:Tahoma; font-size:12px; color:#FFF; border: 1px solid #CCC;
    margin-left:4px;
     margin-top:-95px;
    
    word-wrap: break-word;
    text-align:justify;
    color:#000;
     width:340px;
     height:65px;
 
    
    
  }
 

Gracias de antemano, saludos a todos y se agradece cualquier ayuda..

saludos
fede

[Luminis]

Si lo que quieres es que al pasar el mouse sobre la imagen y esta muestre un texto sobre la propia imagen, entonces necesitas hacer hover sobre el contenedor. Yo lo haría de la siguiente manera. Ejemplo:

Código HTML:

<div id="contenedor">
  <div id="imagen>
    <div id="texto"></div>
  </div>
</div>
 

Código CSS:

#contenedor {
width: 100px;
height: 100px;
}
 
#imagen {
  /*Formato para la imagen y su contenedor...*/
}
 
#texto {
  /* Formato para el texto y su contenedor */
  visibility: hidden;
}
 

Ahora, luego de darle formato a los divs deberás hacer hover sobre el contenedor principal para que al pasar el puntero por cualquier lugar de este, muestre el texto sobre la imagen:

Código CSS:

#contenedor : hover > #texto {
  visibility: visible;
}
 

¿Que hice?

Crear un div que sirva de contenedor general (#contenedor), dentro de este colocas un div que contenga la imagen (#imagen) y dentro del div de la imagen creas otro que contenga el div con el texto que quieres mostrar (#texto).

Le das formato con CSS a todos los divs y procedes a pasar el :hover sobre los contenedores, quedando lo siguiente:

Código CSS:

#contenedor : hover > #texto
 

Esto quiere decir que el div #contenedor hace :hover en el div #texto. Dando como resultado que al pasar el mouse sobre el contenedor general (#contenedor) este haga el efecto de mostrar el texto sobre la imagen.

Ahora...

Es importante que notes y agregues la propiedad visibility, que permite ocultar o mostrar el contenido del contenedor al cual le agregaste esa propiedad.

En nuestro div #texto agregamos la propiedad visibility: hidden; para ocultar el texto del contenedor, y en #contenedor : hover > #texto agregamos la propiedad visibility: visible; para mostrar o hacer visible el contenido del div.

Espero haberte ayudado con tu duda, y por si no te queda del todo claro, te recomiendo que investigues un poco sobre la propiedad CSS :hover y visibility, ya que con ellas harás maravillas, y lo mejor de todo... son fáciles de usar.

P.D: También recuerda usar z-index para colocar capas sobre capas ([inline]div sobre [inline]div), tomando en cuenta que #contenedor irá al fondo, sobre este irá #imagen y sobre imagen irá #texto. Aunque creo que no es del todo necesario usar el z-index .

[fedefrankk]

Hola espectacular tu explicacion, se agradece el tiempo que te has tomado, muchas gracias, ahora me sale.!!!

Enserio muchas gracias .!!!!!