Efecto Opacidad y Aumento para las Imágenes CSS

Efecto Opacidad y Aumento para las Imágenes CSS
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 nuestra plantilla sobre la etiqueta </head>, la ruta sería: Plantilla / Editar 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 el siguiente código con las url de nuestras imágenes, ya sea en una entrada en modo HTML (si se pasa a modo redactar se perderán los efectos), o en un gadget HTML Javascript. También se pueden agregar imágenes .gif.

<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, además de dejar pegado el final de un enlace con el comienzo del otro (dependiendo por el ancho de la entrada). Recuerden que pueden modificar fácilmente el ancho de una imagen en HTML agregando la etiqueta width="200" donde para este ejemplo 200 hace referencia a 200px de ancho, no es necesario agregar el alto (height) ya que blogger lo asume automáticamente. Entonces, si por ejemplo nuestra entrada tiene un ancho de 500px, y nuestras imágenes un ancho cada una de 400px, agregando la etiqueta de width podremos hacer que se visualicen al menos de a dos imágenes sobre el mismo margen, ejemplo de la aplicación de la etiqueta width:

<img width="200" src="URL de la imagen.jpg" />

Pueden agregar o retirar enlaces de las imágenes, en este caso se usan 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.

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.

Efecto de opacidad css para las imágenes en Blogger, efecto original para las imágenes en blogger, efecto de opacidad y aumento en las imágenes de blogger, tutorial css para imágenes en blogger.