Link e Imagen Hover Con Efecto Transicion

Buen dia blogueraass nuevo tuto *v* Bueno seguramente han visto por algunos blogs con este tipo de efecto, donde al pasar el cursor por un link hace transicion una imagen... muy cute por cierto.. >.<
ejemplo:

Shalalalala Pasa tu cursor aqui ^^

muuy bien verdad que se mira muy lindo?? bueno haremos este tutorial para quien no lo sepa okei?

Nos vamos a Plantilla >> Editar HTML >> y buscamos ]]></b:skin>

Ahora justo antes de ]]></b:skin> pegamos este codigo:

a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(http://data.whicdn.com/images/43688874/Sanrio-Puroland-58_large.jpg);
background-position:50% 80%;
background-size:400px;
}

Damos guardar

En lo de azul pones la imagen de tu preferencia.

credito 

wanaseoby

Este codigo si es de mi autoria :)!

Ahora este mismo efecto pero en las imagenes ^^

Preview Pasa el Cursor Sobre Ella

Igual nos vamos a Plantilla >> Editar HTML >> y buscamos ]]></b:skin> justo antes de el pegamos este codigo:

.post img{
box-shadow: 0px 0px 3px #FFFFFF;
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background: url(http://data.whicdn.com/images/43688874/Sanrio-Puroland-58_large.jpg);
background-position: top left;
padding: 6px;
border: 1px solid #fff;
}
.post img:hover{
-webkit-filter: contrast(200%);z-index: -99px;-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background-position: bottom right;
}

Damos guardar  :)

Estes efecto se aplicará a todas las imágenes de las entrada (osea que si eres de la que usan muchas imagenes en tu post pues se vera algo raro o.o)..... Si quiseras usarlo sólo para las que tú elijas entonces cambia .post img{ por .transicion { y .post img:hover{ por .transicion:hover{
Luego pones este código donde quieres que aparezca tu imagen.

<img class="transicion" src="URL de la imagen" />

  oki ahora explicare algo .....si notas que al pasar el cursor cambia la transicion a un color mas brillante verdad?? bueno si no te gusta ese efecto y quieres que se vea normal solo la transicion (osea que se mueva sin brillar) solo quitale esta linea al codigo -webkit-filter: contrast(200%);z-index: -99px; si te gusta como se ve pues dejaselo asi ^^.

Aqui te dejo otros webkit-filters por si gustas cambiarlo por otro que no sea el contrast :)

 -webkit-filter: grayscale(100%); 

-webkit-filter: sepia(100%); 

Es todo super facil verdad.. espero les guste :) besos