Thumbnail

(Caray... al cambiar de plantilla se me ha ido a la porra el CSS del thumbnail...
Pues casi mejor que quien quiera verlo en marcha, que mire en Revolutum, que tengo uno igual, pero en otra plantilla, en la en la entrada llamada "Dedicado a Mc Laren"...)

Hay tantos métodos para mostrar las imágenes... que no hay manera de saber cuál es la "ideal". Pero el thumbnail es uno de los que más me gusta. Principalmente éste, de Dynamic Drive, tan sencillo que no es necesario andar bajándose y "aupando" códigos kilométricos en scripts y links y, además, es facilísimo de adaptar en su diseño a las propias necesidades o gustos. Por otro lado, se distingue de otros métodos, en que sólo con pasar por encima el ratón se despliega el "thumb"... no es necesario clickar sobre la imagen.


Idilio acuático


Código:

1. Colocar dentro del CSS de la plantilla (antes del cierre /skin o /style), el siguiente CSS que, por supuesto, se puede cambiar a gusto (yo he cambiado los bordes, que eran punteados, así como el color de los mismos y el "padding" del "thumb":
   

   
   <style type="text/css">
   
   
   
   /*Credits: Dynamic Drive CSS Library */
   
   /*URL: http://www.dynamicdrive.com/style/ */
   
   
   
   .thumbnail{
   
   position: relative;
   
   z-index: 0;
   
   }
   
   
   
   .thumbnail:hover{
   
   background-color: transparent;
   
   z-index: 50;
   
   }
   
   
   
   .thumbnail span{ /*CSS for enlarged image*/
   
   position: absolute;
   
   background-color: lightyellow;
   
   padding: 5px;
   
   left: -1000px;
   
   border: 6px solid black;
   
   visibility: hidden;
   
   color: black;
   
   text-decoration: none;
   
   }
   
   
   
   .thumbnail span img{ /*CSS for enlarged image*/
   
   border-width: 0;
   
   padding: 2px;
   
   }
   
   
   
   .thumbnail:hover span{ /*CSS for enlarged image on hover*/
   
   visibility: visible;
   
   bottom-right: 60px;
   
   left: 60px; /*position where enlarged image should offset horizontally */
   
   
   
   }
   
   <style type="text/css">
   




2. En la entrada o lugar de vuestro blog donde queráis ver el "thumb", colocad la siguiente pieza de código, con la URL src de la imagen que queráis:
   

   
   <a class='thumbnail' href='#thumb'><img border='0' height='66px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9s8NqaBagD8jNhXYeP2iYa_0Nv2KI9EHnLaYgk48j_gN9W48g0wZGI8JExQOkLm6FBtC4UEWKdMLc_1HZVz8uhFAiGSz9dYqop66Jhy4pbuU4M-sU27qxWmxAeZTrdwjGO-mO2sEg5Uid/s200/MapaCaribe.jpg' width='100px'/><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9s8NqaBagD8jNhXYeP2iYa_0Nv2KI9EHnLaYgk48j_gN9W48g0wZGI8JExQOkLm6FBtC4UEWKdMLc_1HZVz8uhFAiGSz9dYqop66Jhy4pbuU4M-sU27qxWmxAeZTrdwjGO-mO2sEg5Uid/s200/MapaCaribe.jpg'/><br/></span></a><br/>
   

PD: He "mejorado esta entrada del año de la polka, porque no había explicado el código... y no comentaba que lo que yo llamaba "expansor de imágenes" era, precisamente, un thumbnail :)