25/4/13

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

5 comentarios :

  1. waa gracias por la tutorial*O*
    saludos!

    ResponderEliminar
  2. Hermoso tuto ♥
    Gracias por compartirlo! ^^

    ResponderEliminar
  3. buen tuto!! ^v^
    lo intentaré a ver que sale! >u<

    besos!!! ^-^

    ResponderEliminar
  4. *O* aww genial el tuto! ♥
    Gracias por compartilo :33 aah y hermosooo TU bloggi! ♥
    me encanta!

    ResponderEliminar
  5. Acabo de descubrir tu blog y me están encantando muchos de los efectos que enseñas :3
    Gracias ^^

    ResponderEliminar

Muchas gracias por dejar tu dulce comentario ^^
reglas y recuerden :
✿nada de conflictos ni peleas ok
✿no spam y
✿no groserías o ofensas a otros usuarios incluyendo al autor
SI no obedeces estas reglas que te pongo simple borro tu comentario por el bien de mi blog y de todos
muchas gracias por tu dulce atención
^u^ ♥ que tenga un Dulce pero mágico dia
sayonara

}