Mostrar div en forma ascendente

ryckycarrizo · #1 (**permalink**) 01/12/2013, 15:58

Espero estar posteando correctamente, la consulta es la siguiente, primeramente busque durante días y no encontré la solución a lo mio, seguramente no busque bien ya que creo que no es complicado , pongo código:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#foto {
	position: absolute;
	width: 202px;
	height: 230px;
	z-index: 1;
	left: 56px;
	top: 48px;
	border: 1px solid;
	background-color: #FF0;
}
#texfoto {
	position: absolute;
	width: 202px;
	height: 115px;
	z-index: 2;
	left: 0px;
	top: 116px;
	visibility: hidden;
	background-color: #666;
	opacity: 0.4;
	color: #00F;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>
</head>

<body>
<div id="foto" onmouseover="MM_showHideLayers('texfoto','','show')" onmouseout="MM_showHideLayers('texfoto','','hide')">aca va foto
  <div id="texfoto">Aca va explicación</div>
</div>
</body>
</html>

El tema es que quiero
1º que el div con la explicación aparezca deslizándose desde abajo en forma suave cuando pongo el ratón por encima de la foto y bajar al correr el ratón

2º que el texto de la explicación no quede transparente

esto sucederá con 50 fotos, así que debería ser algún tipo de instrucción común

Dato, estoy con el dranweaver cs6

Agradezco la ayuda, Muchas gracias

C2am · #2 (**permalink**) 01/12/2013, 20:27

Para el punto 1, puede que te sirva esto:
http://jsfiddle.net/c2am/DUwhs/
Saludos

ryckycarrizo · #3 (**permalink**) 02/12/2013, 04:00

Hola C2am, muy interesante esta web que sugeris, haciendo pequeñas adaptaciones, quedaria asi:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>

#vertical{
	position: relative;
	width: 200px;
	height: 200px;
	border: 1px solid #C30;
}



#abajo
{
	width: 199px;
	height: 20px;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	position: absolute;
	left: 1px;
	bottom: 0px;
	background-color: #939;
	transition-property: height 500ms linear 0s;
	/* Firefox 4 */
	-moz-transition: height 500ms linear 0s;
	/* Safari and Chrome */
	-webkit-transition: height 500ms linear 0s;
	/* Opera */
	-o-transition: height 1s linear 2s;
}
 #abajo:hover
{
	height: 100px;
}

</style>
</head>
<body>





<h3>Transiciones verticales</h3>
<div id="vertical">

<div id="abajo">De Abajo a Arriba</div>

</div>
</body>
</html>

lo cual hace cuando pones el mouse sobre "de abajo a arriba" haga lo que quiero, pero mi intención es que al poner el mosu en el div "vertical" alli se ejecute lo indicado a "abajo" y en mi torpeza no encuentro como hacer esta instrucción.
¿se entiende?
Y por otro lado aun me queda pendiente lo del punto 2, que la opacidad sea del fondo del div , no de su contenido que es texto....
Gracias, seguimos.
Saludos