Tutorial:Efecto Imagen 6

Bueno este es lo mismo que el anterior efecto que hice  ,solo que aora son dos bordes deslisantes que se unen al pasar el cursor ,para ver el efecto clic en :

Vista Previa

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 #92F6F3;
-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 #0E27B1;
}
img:hover{
box-shadow:inset 260px 0px 1px #7BEEE5,
inset -260px 0px 1px #0E0F0F;}

Para personalizar los colores :
#92F6F3:color del borde deslisante
#0E27B1color del borde 
#7BEEE5:color del efecto deslisante del lado izquierdo al pasar el cursor
#0E0F0F:color del efecto deslisante del lado derecho al pasar el cursor
1px:Puedes cambiarlo es para el tamaño del borde por ejemplo si pones 3px sera mas grueso

Bueno eso es todo ponen guardar y listo