Efecto Opacidad y Aumento para las Imágenes

Efecto Opacidad y Aumento para las Imágenes CSS - Charkleons.com

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 ser 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. 

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.

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.

No hay comentarios:

Publicar un comentario

Gracias por comentar.

Charkleons.com