Tema: Como lograr efecto deslizante en capa
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/04/2013, 22:23
isabelramirezmontoya
 
Fecha de Ingreso: noviembre-2010
Mensajes: 204
Antigüedad: 13 años, 5 meses
Puntos: 1
Como lograr efecto deslizante en capa
Chicos buenas noches, me colaboran con una idea que tengo.

Como hago para que un mensaje (capa) que esta oculta, tenga un efecto deslizante y se visualice al pasar el raton sobre una esquina de ella.

El efecto se lo quiero aplicar a este codigo:
Código HTML: 
Ver original
  1. <html>
  2.  
  3. <head>
  4.  
  5. <style type="text/css"> 
  6.  
  7.  .contenedor
  8.  { 
  9.  margin:0 auto;
  10.  padding: 0;
  11.  width: 300px;
  12.  height: 155px;
  13.  border: 1px solid black;
  14.  background: white;
  15.  }
  16.  
  17.  .contenido1
  18.  { 
  19.  margin:0 auto;
  20.  text-align:center;
  21.  padding: 0;
  22.  height: auto;
  23.  background: #CCCCCC;
  24.  }
  25.  
  26.  .contenido2
  27.  { 
  28.  margin:0 auto;
  29.  text-align:center;
  30.  padding: 0;
  31.  height: auto;
  32.  } 
  33.  
  34.  p
  35.  {
  36.  text-align:justify; 
  37.  margin-top: 3px; margin-right: 3px; margin-bottom: 3px; margin-left: 3px;
  38.  }
  39.  
  40. </style>
  41.  
  42. </head>
  43.  
  44. <body>
  45.  
  46. <div class="contenedor">
  47.  
  48. <div class="contenido1">Importante</div>
  49.  
  50. <div class="contenido2"><p>La idea es que este mensaje (capa) permancezca oculto, que solo sea visible la franja que dice importante, que solo cuando el usuario pase el raton sobre esta franja que dice Importante, la capa que contiene el mensaje, se delice hacia abajo y se visualice</p></div>
  51.  
  52. </div>
  53.  
  54. </body>
  55. </html>

Gracias