Tema: problema para hacer que se muestre texto sobre una imagen con hover
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/11/2013, 12:25
Avatar de Faks
Faks
 
Fecha de Ingreso: junio-2012
Mensajes: 26
Antigüedad: 12 años, 5 meses
Puntos: 1
Respuesta: problema para hacer que se muestre texto sobre una imagen con hover
A ver si te sirve...

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <style>
  6.  
  7. h1 {
  8.     font-size: 1em;
  9.     color: #fff; 
  10.     display: block;
  11.     padding-top: 10px;
  12.     height: 35px;
  13.     background: rgba(0,0,0,0.5);
  14.     margin: 5px;
  15. }
  16.  
  17. #imagen {
  18.     width: 400px;
  19.     height: 300px;
  20.     background: url('http://2.bp.blogspot.com/-Pjr77WToV9Y/TyZg9C6vVZI/AAAAAAAACGs/ihG8pOVboHE/s400/lamborghini-murcielago-wallpaper+6.jpg');
  21. }
  22.  
  23. /* esto hace que este siempre oculto el texto */
  24. #texto {
  25.     display: none; 
  26. }
  27.  
  28. /* este estilo miestra el texto cuando se pasa el cursor en la imagen */ 
  29. #imagen:hover #texto{ 
  30.         display: inline; 
  31. }
  32.  
  33. </style>
  34.  
  35. </head>
  36. <body>
  37.  
  38. <div id="imagen">
  39.     <div id="texto">
  40.         <h1>Este texto se muestra solo en hover</h1>
  41.     </div>
  42. </div>
  43.  
  44. </body>
  45. </html>