[Tutoriales] Efecto imagen ahover scroll con marco al pasar el ratón

Hi, hi ¿cómo están hoy? Yo bien ^^ bueno hoy os voy a dejar un tuto de un efecto llamado Ahover scroll, que es el que tengo yo en mis imágenes, para verlo da a continuar leyendo.

Bueno empiezo el tuto:

Vamos a plantilla-edicion html- expadir arituligio y control +f 

Buscamos :

.post-body img  O .post-body img { 

Adelante de esto te saldrá 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 aquí 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 {

Y ponemos esto:

 .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

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 imágenes 

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.

Y aquí se acaba el tuto, pero antes:

Créditos: Cute space of my magical world

Espero que os haya servido, ¡besos!