Bienvenidos a Aitokawaii. Gracias por visitarme! Si te ha gustado el blog sigueme! O bien ve a tu Escritorio blogger
Kawaii Tutos

Neko

Gracias por tu visita, recuerda comentar!! No tomes mis tutoriales porfavor, si deseas alguno pidemelo ne!
Entradas Perfil Afiliados Chat Tutoriales


 No copies los tutoriales sin mi permiso
 Si tomas algo de Kawaii Tutos debes poner creditos
 No spam al comentar o en el chat
 No insultar
 Tolera la opinion de los demas
 Si pides un tutorial haslo en la entrada correspondiente AQUI
 No olvides comentar ne!
[Blogger] Tutorial: Imagen hover, se opaca o aclara al pasar mouse
17 sept 2012| 16:42 | 0 Bocadillo(s)



 Entras a tu blog, y te vas a Diseño >> Edicion de HTML y le pones Expandir plantillas de artilugios y ahora buscas este codigo:
.img
O
a: img {
 Y justo abajo pondras este codigo:
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear;
 -moz-transition: opacity 1.5s linear; }
te quedaria algo asi:
.img o a img {
border: 0px;  
opacity: 100; 
filter: alpha(opacity=100); 
-o-transition: opacity 1.5s linear;
border-radius: 10px; 
-webkit-transition: opacity 1.5s linear;
 -moz-transition: opacity 1.5s linear; }
 Ahora busca este otro codigo
img:hover 
o
a:hover img {
Bien justo de bajo de este codigo pon esto:
opacity: .70;
 filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
 border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear; }
Y al final quedaria asi:
img:hover a:hover img {
opacity: .70; 
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
 border-radius: 10px; 
-webkit-transition: opacity 1s linear; 
-moz-transition: opacity 1.5s linear; }
 Puede llegar a suceder que en tu plantilla no venga estos codigos si llegara a suceder solo pega los dos codigos finales, para ello busca la seccion de body { o bien el de /* Content en la plantilla de blogger,  pones los dos codigos.

Por ejemplo, tu codigo final quedaria asi:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);

img, a img {
border: 0px;
opacity: 100;
filter: alpha(opacity=100);
-o-transition: opacity 1.5s linear;
border-radius: 10px;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
}

img:hover, a:hover img {
opacity: .70;
filter: alpha(opacity=100);
-o-transition: opacity 1s linear;
border-radius: 10px;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1.5s linear;
}

Bien cualquier duda decidmela bye 

Etiquetas: ,

Visita mi otro blog AITOKAWAII y encuentra material.




|









Click para leer reglas

Welcome!
He creado este blog para quienes desean hacer su blog mas divertido. Soy sunadokei y me encanta todo lo asiático x.x Tengo otro blog en el que encontraran todo el material que necesiten para usar mis tutoriale. Este blog es 100% original asi que no lo copies, lee las reglas para que sepas como puedes tomar cosillas de Kawaii tutos. Disfruta tu estancia aqui!

SÍGUEME AQUÍ!