5 ago. 2013

[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  .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:


Espero que os haya servido, ¡besos!



7 comentarios:

  1. waaa... que lindo queda!!!
    100pre eh adorado lo kawaii
    pero yo no lo soy aabuuuu pero admiro los que si son n_n

    ResponderEliminar
  2. seria bueno que pusieras un pantallaso del efecto, y tambien (te lo agradeceria de corazon) poner como se debe colocar en una plantilla clasica o en su defecto de blogskin XDDD pero = se agracece!!

    ResponderEliminar
  3. Wouh...muchos códigos (mareo xDDDDD) pero bueno, algún día lo voy a poner... (algún día...xD)

    ResponderEliminar