Efecto Zomm en la imagenes con CSS

Para obtener el Efecto Zoom en la imagenes en tu blog de Blogger entra en

►Diseño
►Diseñador de plantillas
►Avanzado
►Añadir CSS , y ahí en el campo, para Añadir código CSS personalizado, agregamos el siguiente código:

.img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.img :hover {
margin-top: 2px;
}

Para poner este efecto en una imagen dentro de un Gadgets HTML/Javascript, o en el HTML de una entrada especifica de nuestro blog de Blogger, añade este seria el código CSS

</div>
<a class="img-zoom" href="Url" target="_blank">
 <img src="Url de la imagen " /></a>
<style type="text/css">
.img-zoom{
 -webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 2; margin: 0 0px 0px 0;
}
.img-zoom :hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
opacity: 1;
 }
</style>

Url para enlazarla a una dirección web.
Url de la imagen la dirección de la imagen selleccionada.