Galeria de imagenes en miniatura con efecto zoom usando css

Usando CSS y con un poco de creatividad podemos hacer una pequeña Galeria de Imagenes en miniatura, que con solo pasar en cursor sobre la imagen aumenta su tamaño (efecto zoom) sobreponiedoce sebre las demas. esto lo hacemos usardo en comado hover, ademas podemos agregarle estilos de bordes con diferentes propiedades (yo le he colocado una por defecto).
puedes ver un  pequeño en jemplo en este:

blogs pruevas

Por lo regular las Galerias se agregar ya sea en una paguina o en una entrada por lo que podemos agregar es siguiente codigo es la seccion de HTML de las estradas o paguinas.

<style>
/* Galeria de imagenes*/
.galeri{
background:#0000;
margin-top:5px;
margin-left:5px;
}
.galeri img {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 55px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position:static;
}
.galeri img:hover {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
width: 50%;/*tamaño de imagen al pasar en cursor*/
height:50%;/*tamaño de imagen al pasar en cursor*/
float:center;
position:absolute;
padding: 5px;
margin-top:-15%;/*posicion de arriba a abajo al pasar el cursor*/
margin-left:-25%;/*posicion de izquierda a derecha al pasar el cursor */
}

</style>

<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="h#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

</div>
<div class="galeri">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>
</div>

Si quieres agregar otra imagen en cualquier columna simplemente agregar:

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ZSh9vKfJ-glb_iAC3oxMTDDxeCSJN05xkNbcK-iJi6W22J9IdhCa5XKZTtZ_4cqAOMnpuXTyhs77klMdARB1zu4Dmg8jZ3tfiqn0ipWi_2zI9iktxMDxTzOPVy6Ptph_zyhh2htKv_0/s1600/Paisajes-de-Mar.jpg" height="125px" width="125px" /></a>

En cualquier parte dentro de: ( no tienes que agregar lo de negro de nuevo, simplemente agrega dentro de el codigo de la imagen nueva)

<div class="galeri"> Aqui codigo de arriba con el url de la nueva imagen </div>

 y si quieres agregar otra fila, simplemente pega todo el codigo:( incluyendo lo de azul)

<div class="galeri"> Aqui codigo de todas la imagenes de la nueva fila </div>

Como lo vez es Facil agregar esta Galeria, una de las desventajas es que no tendra en efecto Zoom en navegadores modernos y nucho menos en IE.