sábado, 13 de octubre de 2012

efectos para las imagenes al pasar el cursor

Les traigo algunos efectos simpaticos que pueden usar para sus blog!! funcionan cuando se coloca el cursor sobre las imagenes del blog...


  1er Efecto: efecto giratorio


primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:

img{-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform:perspective(400px) rotateX(0deg);
-o-transform:perspective(400px) rotateX(0deg) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: perspective(400px) rotateX(360deg) ;
-moz-transform: perspective(400px) rotateX(360deg) ;
-o-transform: perspective(400px) rotateX(360deg);}

 2do efecto: efecto agrandado

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:
img{
-webkit-transform: perspective(400px) ;
-moz-transform:perspective(400px) ;
-o-transform:perspective(400px) ;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform:perspective(400px) translateZ(150px) ;
-moz-transform:perspective(400px) translateZ(150px) ;
-o-transform:perspective(400px) translateZ(150px) }

3er efecto: efecto transicion

primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:


img{
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;}

 4er efecto: efecto que gira hasta desaparecer


 primero vamos a diseño de la plantilla HTML  y antes de ]]></b:skin>  pegamos el siguiente codigo:


img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
img:hover{
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0)
}

 

4 comentarios:

  1. lindisimos *.*
    me encanto el 3
    abraxOx nena >.<

    ResponderEliminar
  2. Una pregunta guapa... si quiero que solo una imagen del post tenga el efecto de que se agranda (es lo que me interesa en este caso) cómo puedo hacerlo???
    Muchas gracias por tu blog!!! Me ha ayudado mucho ^^

    ResponderEliminar
  3. Hey guapa!! esta genial esto me ha encantado y lo use y pues te afile, y es que en mis afiliados tengo agregados a los que con sus tutoriales me han ayudado te agradezco muchisisisimo enserio Gracias! y espero y no te moleste que lo haya utilizado si no ps me avisas va??, un beso guapa!! :)

    ResponderEliminar

Gracias por dejar tu lindo comentario, seguro que te lo devuelvo n.n