Tema: ayuda crear mensaje foro principal
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 17/02/2011, 14:48
davidbrepe
Invitado
  
Mensajes: n/a
Puntos:
Respuesta: ayuda crear mensaje foro principal
ahi te va un bonito ejemplo ;)
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type='text/css'>
  4.  
  5. .thumbnail{
  6. position: relative;
  7. z-index: 0;
  8. }
  9.  
  10. .thumbnail:hover{
  11. background-color: transparent;
  12. z-index: 50;
  13. }
  14.  
  15. .thumbnail span{ /*CSS for enlarged image*/
  16. position: absolute;
  17. background-color: black;
  18. padding: 5px;
  19. left: -100px;
  20. border: 1px dashed gray;
  21. visibility: hidden;
  22. color: #FFFF00;
  23. text-decoration: none;
  24. }
  25.  
  26. .thumbnail span img{ /*CSS for enlarged image*/
  27. border-width: 0;
  28. padding: 2px;
  29. }
  30.  
  31. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
  32. visibility: visible;
  33. top: 0;
  34. left: 10px; /*position where enlarged image should offset horizontally */
  35. }
  36.  
  37. </style>
  38. </head>
  39. <body>
  40.   <a class="thumbnail" href="#thumb">
  41. <img src="http://img74.imageshack.us/img74/7974/inseguridadji1.jpg" width="100px" height="100px" border="0" />
  42. <span>
  43. Texto o palabra que quieras que aparezca en la imagen</span>
  44. </a>
  45.  
  46.  
  47. </body>
  48. </html>