Poner galería de fotos (sin borde) y que aumente al pasar por encima de las fotos

Fuente:  http://www.trucosblogs.com/2010/09/galeria-de-imagenes-con-css.html




Objetivo: poner una serie de fotografías que aparezcan una al lado (o si no hay sitio, justo debajo), de forma que la gente, cuando se ponga sobre la foto, la imagen cambia de tamaño (aumenta).


Para conseguirlo, hay que hacer 2 cosas:


Paso uno:  en Blogger, donde pone "plantilla", elijo "edición de html". Y luego, "continuar".


Buscamos la palabra    ]]></b:skin>    y pondremos el código CSS justo después.


Como no la voy a ver fácilmente, puedes usar la combinación de teclas CONTROL + F. Si el navegador que uses no hace nada, fíjate en la parte superior derecha (chrome) o en la parte inferior  (mozilla firefox). Cada navegador lo sitúa en un punto diferente.


Una vez localices esa entrada ( ]]&gt;   ) , justo debajo, inserta una línea de comentarios, de tal forma que te quede así:




/* empieza


 codigo fotos album


*/

/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

/* termina


 codigo fotos album


*/

 (Lo ponemos justo debajo, para recordar "de donde a donde va ese código)

Segundo paso: Guarda estos cambios, pulsando en el botón naranja que está abajo a la derecha , pone "Guardar plantilla"-

Tercer paso: Ve a "Diseño" y añade un nuevo "gadget" , como siempre, HTML/Javascript.

HTML/Javascript Añade una característica de un tercero u otro código a tu blog. Por Blogger

Pon exactamente este código, recordando que la URL (dirección web de las fotos) deberás cambiarla por las "rutas" que tú desees:

<div class="hovergallery">
<img src="url-imagen-1"/>
<img src="url-ímagen-2"/>
<img src="url-imagen-3"/>
<img src="url-imagen-4"/>
</div>

ahora, te sugiero unas direcciones URL para que pruebes, sólo te toca cambiar donde pone "url-imagen-1", por la dirección correspondiente:

url1 


"http://www.comunitatvalenciana.com/files/imagecache/galeria_fotografica/files/fotos/san-juan-05.jpg"/&gt;


url2 


"http://wyngateresorts.com/components/com_reservations/gallery/destinations/large/playa_del_carmen.jpg"/&gt;




url3


"http://www.mexicodesconocido.com.mx/assets/images/destinos/playa%20del%20carmen/moto_acuatica_playa_del_carmen2.jpg"/&gt;

Recuerda que los códigos html tienen una función específica, por ejemplo, en este caso, img src busca una foto en la ruta (URL) que le digamos. 

Div, por ejemplo, "parece" estar haciendo una división automática de los diferentes contenidos.

Probadlo y me contáis. Recordad la función de "comentar", justo debajo de los "posts" (entradas, artículos....).

Saludos