Aitokawaii


ENTRADAS ABOUT AMIGOS MATERIAL TUTORIALES Extras FCBOOK TWITTER Inicio

[Tutorial] Imagen se aclara o se opaca al pasar el mouse
lunes, 9 de julio de 2012 | 7:25


Bien hoy les traigo un tuto de como hacer para que en su blog se vean las imagenes como la de arriba, si pasas el mouse sobre la imagen como notas se opaca o se transparente un poco. Como lograr eso es lo que hoy te explicare.

Ya me habian pedido este tuto muchisimo pero no lo habia podido hacer por falta de tiempo bueno sigan los pasos.

1) 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 {
2)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; 
}
3) 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 o 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; 
}
4) 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, y si tienes una plantilla blogskin solo busca donde dice body { y despues de su codigo de body pones los dos codigos.

Por ejemplo, tu codigo final quedaria asi:


Para blogger u otra plantilla
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;
}
Para blogskin
body {

background:url(http my img);

font-family:  trebuchet ms;

background-attachment:fixed;

cursor: url(http:my cursor), auto;

}

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 en este caso solo copia el codigo tal cual te lo he mostrado.

Espero les haya servido si surge alguna duda recuerden dejarmelo en la parte donde dice dudas para asi poder contestarlas. Un saludote y byebye

Etiquetas:


0 boyfriend[s] | volver arriba




|