Advanced Search

Agrandar Imagenes

/ Published in: CSS
Save to your folder(s)
Mostrar las imagenes y que se agranden cada vez que se tocan o pasen el ratón del mouse por encima.Es un truco que resulta curioso e interesante, Para llevarlo a cabo iremos a plantilla y justo antes de la etiqueta de ...
añadiremos este código:

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type='text/css'>
  2.  
  3.  
  4.  
  5. .thumbnail{
  6.  
  7. position: relative;
  8.  
  9. z-index: 0;
  10.  
  11. }
  12.  
  13.  
  14.  
  15. .thumbnail:hover{
  16.  
  17. background-color: transparent;
  18.  
  19. z-index: 50;
  20.  
  21. }
  22.  
  23.  
  24.  
  25. .thumbnail span{ /*CSS for enlarged image*/
  26.  
  27. position: absolute;
  28.  
  29. background-color: black;
  30.  
  31. padding: 5px;
  32.  
  33. left: -100px;
  34.  
  35. border: 1px dashed gray;
  36.  
  37. visibility: hidden;
  38.  
  39. color: #FFFF00;
  40.  
  41. text-decoration: none;
  42.  
  43. }
  44.  
  45.  
  46.  
  47. .thumbnail span img{ /*CSS for enlarged image*/
  48.  
  49. border-width: 0;
  50.  
  51. padding: 2px;
  52.  
  53. }
  54.  
  55.  
  56.  
  57. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
  58.  
  59. visibility: visible;
  60.  
  61. top: 0;
  62.  
  63. left: 10px; /*position where enlarged image should offset horizontally */
  64.  
  65.  
  66.  
  67. }
  68.  
  69.  
  70.  
  71. </style>
  72.  
  73. Después sólo nos faltará aplicar este otro en el sitio que queramos mostrarlo bien sea un post o en el -sidebar-:
  74.  
  75. <a class="thumbnail" href="#thumb"><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" width="100px" height="100px" border="0" /><span><img src="http://i81.photobucket.com/albums/j219/jgutierrezs/arbol-2.jpg" /><br />Inseguridad</span></a>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.