Efecto Opacidad y Aumento para las Imágenes

A continuación les voy a mostrar cómo se le puede agregar un efecto de opacidad y aumento de tamaño muy original a las imágenes que publicamos en Blogger. 

Primero debemos agregar el siguiente estilo en la entrada o gadget en donde vayamos a publicar las imágenes, para una entrada sería en el modo HTML. No es necesario agregarlo a la plantilla. Pueden pasar de un modo a otro en la entrada pero para actualizar el tema se debe hacer en Modo HTML. 

---------------------------

<style type="text/css">

.hovergallery img{

-webkit-transform:scale(0.8); 

-moz-transform:scale(0.8); 

-o-transform:scale(0.8); 

-ms-transform:scale(0.8); 

-webkit-transition-duration: 0.5s; 

-moz-transition-duration: 0.5s; 

-o-transition-duration: 0.5s; 

-ms-transition-duration: 0.5s;

opacity: 0.7; /*Nivel de opacidad de las imágenes*/

margin: 0 10px 5px 0; /*Margen entre las imágenes*/

}

.hovergallery img:hover{

-webkit-transform:scale(1.1); /*Webkit: Escala de aumento de la imagen 1.2x tamaño original*/

-moz-transform:scale(1.1); 

-o-transform:scale(1.1); 

-ms-transform:scale(1.1); 

box-shadow:0px 0px 30px gray; /*Sombra sobre toda la imagen*/

-webkit-box-shadow:0px 0px 30px gray; 

-moz-box-shadow:0px 0px 30px gray;

-ms-box-shadow:0px 0px 30px gray; 

opacity: 1;

}

</style>

---------------------------

Luego solo debemos agregar la etiqueta div de apertura <div class="hovergallery"> antes o arriba del código de las imágenes -en el modo HTML-, y al final o abajo del código de las imágenes colocamos la etiqueta div de cierre </div>. Se puede pasar a modo redactar sin problemas, no se perderá el efecto. También se pueden usar imágenes .gif. Así podría quedar el código (debajo del div del efecto puede ir el div de la alineación, no hay ningún problema con eso).
-----------------------------------

<div class="hovergallery">

<img src="URL imagen 1" />

<img src="URL imagen 2" />

<img src="URL imagen 3" />

<img src="URL imagen 4" />

<img src="URL imagen 5" />

<img src="URL imagen 6" />

</div>

-----------------------------------

Se recomienda que las imágenes tengan las mismas medidas. El que se visualicen una al lado de otra depende del ancho de cada imagen, y del ancho que tenga la entrada. Recuerden que pueden modificar fácilmente el ancho de una imagen en HTML desde la etiqueta width="200" donde para este ejemplo 200 hace referencia a 200px de ancho, no es necesario agregar el alto (height) ya que los navegadores lo ajustan automáticamente. Por ejemplo:

<img src="URL imagen 1" width="200" />

Pueden agregar o retirar enlaces de las imágenes, en este caso usé 6 enlaces como ejemplo. Igualmente pueden jugar con el diseño de la presentación, es decir, pueden dejar los dos primeros enlaces para que las imágenes estén una al lado de la otra, y el tercer enlace con un tamaño mayor en la imagen para que se visualice sola, y así sucesivamente.

Cómo agregar un enlace de redirección a una imagen -que al hacer clic sobre la imagen se vaya a otra página-. Solo debemos agregar las etiquetas <a href=""> </a> al código de la imagen. Por ejemplo:

<div class="hovergallery">

<a href="URL QUE REDIRECCIONA"> <img src="URL imagen 1" /></a>

<a href="URL QUE REDIRECCIONA"> <img src="URL imagen 2" /></a>
<a href="URL QUE REDIRECCIONA"> <img src="URL imagen 3" /></a>
</div>

Si se quiere que el enlace se abra en otra pestaña para que el visitante no deje nuestra página solo se tendría que agregar target="_blank" al código de la URL que redirreciona. Por ejemplo:

<div class="hovergallery">

<a href="URL QUE REDIRECCIONA" target="_blank"> <img src="URL imagen 1" /></a>

<a href="URL QUE REDIRECCIONA" target="_blank"> <img src="URL imagen 2" /></a>
<a href="URL QUE REDIRECCIONA" target="_blank"> <img src="URL imagen 3" /></a>
</div>

Si quieren retirar la sombra o el brillo de la imagen cuando aumenta su tamaño, dejen 0px en lugar de los 30px en la parte del /*Sombra sobre toda la imagen*/ en las cuatro líneas que llevan la palabra shadow.

Espero que esta información les sea muy útil.

Gracias.

Hacer crecer las imágenes, cómo puedo hacer crecer las imágenes cuando pase el puntero del mouse ratón sobre ellas, hacer transparentes las imágenes, cómo se pueden dejar las imágenes casi transparentes, efecto de transparencia en imágenes html, efecto para aumentar tamaño de imágenes,