Tutorial: Efecto zoom de imágenes con retardo en CSS3, sólo para las imágenes de los posts en Blogger

Información

Hay varios tutoriales en la red respecto a la aplicación de efectos a las imágenes de nuestro blog, pero despues de estar probando varios de ellos, me molestaba bastante que estos efectos se aplicaran en todas las imágenes del blog y no sólo en las imágenes de los posts, así que me puse manos a la obra para buscar como añadir esta opción y como personalizar despues el efecto, de forma que al pasar el cursor por la imagen hace efecto zoom pero con un retardo de 2 segundos de forma progresiva, cosa que veo más elegante que no un zoom inmediato.

Para conseguir que el efecto se aplique unicamente a las imágenes de los posts, vamos al Panel de control de blogger - Plantilla - Editar HTML, CTRL + F y escribimos img para buscar el tramo de código que nos interesa y que estará situado después de <"skin">

Aqui lo vemos, normalmente, no estará precedido de .post, motivo por el cual quedaba aplicado a todo el blog, es por eso que lo tenemos que anteponer a img.

A continuación de  todo este grupo colocaremos el código.

.post img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5)
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Donde el valor 1.5 es la proporción de aumento de la imagen y 2 es el tiempo de retardo en aumentar la imagen.

Si no queremos que haya retardo al pasar el cursor sobre las imágenes, eliminaremos todas las lineas donde pone transition, podemos ver este ejemplo en Maraya Life, otro blog donde colaboro en su diseño y mantenimiento. Asimismo también nos servirá para ver otra posible ubicación del código en otra plantilla diferente.

Como vemos en la anterior captura, en este caso hemos añadido el código despues del grupo .post-body

Por último voy a añadir otro efecto que es Efecto Crooked photo,
con este efecto al pasar el cursor rotaremos la imagen hacia el lado izquierdo 7 grados, pero podemos personalizarlo completamente cambiando el valor “-7deg”.

.post img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

.post img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}

 Espero que haya sido comprensible y de utilidad, y como siempre atenderé cualquier duda que pueda solucionar en los comentarios.