Como añadir un Drop Shadows para imágenes

Un Drop Shadows para imágenes.

En el mundo de la animación, "drop shadow" es la sombra que proyecta una imagen y ampliarla al momento que pase el ratón en blogger.

Hoy vamos aprender como reducir al mínimo el tamaño de las imágenes y luego al pasar el ratón por enzima de la imagen nos muestre su tamaño original.

Los primero que tenemos que hacer es ir a Plantilla y hacer un copia de
Luego nos vamos a Plantilla > HTMl y buscamos ]]></b:skin> 

Ahora pegamos el siguiente código justo encima

ver código

.MBT-CSS3 img{

-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/

-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/

-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/

-o-transition-duration: 0.5s; /*Opera Animation duration*/

opacity: 0.5;

margin: 0 10px 5px 0;

}

.MBT-CSS3 img:hover{

-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/

-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/

-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/

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

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

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

opacity: 1;

} 

Ya tenemos nuestro código CSS3 insertado en nuestro código HTML de blogger.
Para que este código funciones, tenemosque añadir a nuestras entradas el siguiente código:

<div class="MBT-CSS3">
<img src=" El URL de la imagen va aquí " />
</div>

A continuación realizamos  lo siguiente

1 Ir a Entradas
2 Abrir nueva Entrada
3 Escribe tu artículo en tu entrada y carga una imagen en tu artículo.
4 Luego da un clic en la parte superior izquierda de tu entrada donde dice “HTML”
5 Se te abrirá el código HTML de tu entrada, en el cual tienes que realizar lo siguiente
6 Copia el siguiente código enzima del código de la imagen que cargaste.

Copiamos la URl de la imagen que cargamos y la copiamos despues de src donde lo he marcado en morado y borramos el código anterior de la imagen
Si quieres añadir este efecto a otra imagen solo vasta con añadir este código <img src=" El URL de la imagen va aquí " /> antes del cierre </div>.

Este efecto de imagen es compatible con todos los navegadores