Efecto imagen ahover scroll con marco al pasar el mouse

hola asi es mi efecto de mi pasado blog perdonen la tardanza de esto....
es que sinceramente yo no me see mucho efectos para sus blogs pero trato lo mas posible ok
y tbm me tarde porque ya no me acordaba como le hice
XD
al final credits porque no es 100%  mio okis
espero y me entiendan ok

un ejemplo sin letras:

vamos a lo de siempre a la rutina 

plantilla-edicion html- expadir arituligio y control +f 

buscamos :

.post-body img  

O 

.post-body img { 

adelante de esto  

te saldra lo siguiente 

  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

lo de arriba 

tienes que borrar todo lo que aparece hasta el corchete este } 

si eres el caso de que no te sale eso 

pues prueba con 

img, a img {

pero aqui no borres nada solo pega el código

abajo de el  

*********************************************

y después pega lo siguientes  abajo de :

.post-body img {

o  img, a img {

ASI pero no copies post - body o imag  se supone que ese ya esta : 

.post-body img { 

   background: url(url de la imagen marginado);

padding: 5px;

-moz-border-radius: 8px 8px 8px 8px;

-webkit-border-radius: 5px 5px 5px 5px;

border-radius: 4px 4px 4px 4px;

-goog-ms-border-radius: 8px 8px 8px 8px;

border-radius:8px 8px 8px 8px;

border: 2px dashed #ffffff;

opacity:.99;

filter: alpha(opacity=99);

background-position: bottom;

-moz-transition-duration: 2s;

-webkit-transition-duration: 2s;

-o-transition-duration: 2s;

}

.post-body img:hover {

background: url(url de la segunda imagen al pasar mouse );

padding: 7px;

box-shadow: #000000 0px 0px 8px;

-moz-border-radius: 5px 5px 5px 5px;

-webkit-border-radius: 5px 5px 5px 5px;

border-radius: 4px 4px 4px 4px;

-goog-ms-border-radius: 8px 8px 8px 8px;

border-radius:8px 8px 8px 8px;

opacity:.70;

filter: alpha(opacity=70);

border: 1px solid #ffffff;

background-position: left;

-webkit-transition-duration: .2s;

-moz-transition-duration: .2s;

-moz-transition-duration: 2s;

-webkit-transition-duration: 2s;

-o-transition-duration: 2s;

}

EXPLICACIÓN :

waaa que colores 

 es el url de la imagen 

el segundo url es cuando pasas el mouse se va moviendo e 

cambiando

es el tamaño de tu margen del la imagen 

es diferentes tipos de bordes

es la opacidad de tu imagenes 

osea cuando pases una imagen se opocara la imagen

si quieres el efecto al reves 

tienes que poner la cantidad mas baja en mi caso era cuando pasaba la imagen

pero si la quieres que las imagenes se opaquen y quieres pasar al mouse para que 

se vean del color principal 

ejemplo:

en la de arriba es 

opacity:.70;

filter: alpha(opacity=70);

y abajo en

hover 

opacity:.99;

filter: alpha(opacity=99);

pueden cambiar el 70 por 60  o 50 etc el que quieran que se vea el efecto ok  

si no lo quieren asi pues no cambie solo la cantidad de hover ok 

borde es de tu preferencia el mio casi no se nota

arriba dice dashed 

y al pasar el mouse es solid  #ffffff; ahi va el color que quieran 

y para terminar el tamaño de tu borde 1px  cambialo como quieras  

y por ultimo 

esto es el efecto de duracion de scroll

si tienes experiencia puede cambiarlo

de lo contrario no cambies nada ok

vista previa

y si todo esta bien

dale en

guardar

ok

espero les haya gustado y sobre todo 

que me entedieran

DUDAS porfavor hasmela saber 

creditos by
http://notasinglesong.blogspot.com.ar/tutorial pricipal  pero su efecto que tiene ella es diferente :
http://notasinglesong.blogspot.com.ar/2012/02/tutorial-html-efectos-en-imagenes-en.html

mi nueva firma e
normas
waa >u< feliz estoy yo hice algunas firmas 

ENTRADA HECHA POR :

REGLAS PORFAVOR 

este material es 100% hecho y publicado  por :

Hii muchas gracias por venir no olvides dejar un estelarcomentario