30 abr. 2014

imagen que se opaca y redondea al pasar .

                  

Hola Hoy Les Traigo Un Tutorial Muy Kawaii Que Es Un Tuto De Que Tu Pasas El Cursor Por Una Imagen De Tu Blog Y Se Opaca Y Se Redondean Las Esquinas . PD. Participa En El Concurso Y Gana Una Plantilla De Miu Furinji .
Ej Efecto Imagen : 

Disculpen Por La Mala Calidad Pues Ven Que La Primera Imagen Es Común Y Corriente Y La otra tiene los bordes redondeados y esta opaca .



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:

.imgOa: 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; }

1/2 te quedaria algo haci Je :

.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 oa:hover img {

Bueno 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; }


Te Quedaria Haci : 

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; }

4 Puede llegar a suceder que en tu plantilla no vengan estos codigos si llegara a suceder solo pega los dos codigos finales, para ello busca la seccion de body { o bien el de /* Content plantilla  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;}


Creditos a un blog demaciado kawaii que descubri :love 











3 comentarios:

  1. *O* Me encantó el tuto, muchísimas gracias por publicarlo! Ya te sigo, me encanta tu Blog y tus tutos son geniales n.n Me gustaría que te pasaras por mi Blog si no es mucha molestia!
    Saluditos Luna~

    ResponderEliminar
  2. ¡Hola! Ya te afilié y ya te sigo :) Soy de http://sabor-del-cafe.blogspot.com.ar/

    ResponderEliminar

Hola Konichiwa Espero Que Comentes Algo Lindo o3o Lind@ Bueno Espero Que Te Guste este Post Y Todos Los Post Bueno Sigueme Para Saber Cuando Actualizo .. Saludines \(o3o)/