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