Tutorial:Efecto Imagen 5

Hola,  como estan ,yo toy apuradita ,pues no tengo suficiente tiempito x.x ¡ jiji Pero nose preocupen toy asiendo rapidito los tutoriales.Bueno les traigo otro efecto para las imagenes,que al pasar el cursor sobre la imagen aparece un borde deslisante,bueno para que me comprendan clic en :

Vista Previa

Este efecto hay en dos formas la que vieron es que va de izquierda a derecha

Si les gusta sigan los pasitos :
Para Plantilla Basica: Ir a Plantilla/Edicion Html/Buscar con Ctrl +F  ]]></b:skin>
Para Plantilla Clasica o Blogskin:Pegar el siguiente codigo antes de </style>

img{
background:transparent:
box-shadow:inset 0 0px 0px #5AE6F2;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #2EB8EB;
}
img:hover{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
box-shadow:inset 600px 0px 1px #7CA9FB;}

Este otro  va de derecha a izquierda  el borde que se desliza n.n ,para ver la diferencia clic en :
Vista Previa

Si te gusta este sigue los siguientes pasos,es el mismo codigo que el anterior ,solo tienes que cambiar cambia 600px a -600px para tener  este efecto.
Para personalizar los colores :
 #5AE6F2color del borde que se desliza
#2EB8EB:color del borde 
#7CA9FB:color del bode que se desliza al pasar el cursor