Annyz-BlOg : Link e Imagen Hover Con Efecto Transicion
para COPIAR los codigos usa la tecla Ctrl + C y para PEGAR usa la tecla Ctrl + V gracias :) El Blog Se visualiza mejor con Google Chrome..

07 marzo 2013

Link e Imagen Hover Con Efecto Transicion



Buen dia blogueraass nuevo tuto *v* Bueno seguramente han visto por algunos blogs con este tipo de efecto, donde al pasar el cursor por un link hace transicion una imagen... muy cute por cierto.. >.<
ejemplo:


muuy bien verdad que se mira muy lindo?? bueno haremos este tutorial para quien no lo sepa okei?

Nos vamos a Plantilla >> Editar HTML >> y buscamos ]]></b:skin>

Ahora justo antes de ]]></b:skin> pegamos este codigo:


a{
text-decoration:none ;
color:#BDA291 ;cursor:pointer;
-webkit-transition:All 0.4s ease ;
-moz-transition:All 0.4s ease ;
-o-transition:All 0.4s ease ; }
a:hover{
color:#fff ;
background:url(http://data.whicdn.com/images/43688874/Sanrio-Puroland-58_large.jpg);
background-position:50% 80%;
background-size:400px;
}

Damos guardar

En lo de azul pones la imagen de tu preferencia.
credito 
wanaseoby

Este codigo si es de mi autoria :)!

Ahora este mismo efecto pero en las imagenes ^^

Preview Pasa el Cursor Sobre Ella


Igual nos vamos a Plantilla >> Editar HTML >> y buscamos ]]></b:skin> justo antes de el pegamos este codigo:

.post img{
box-shadow: 0px 0px 3px #FFFFFF;
-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background: url(http://data.whicdn.com/images/43688874/Sanrio-Puroland-58_large.jpg);
background-position: top left;
padding: 6px;
border: 1px solid #fff;
}
.post img:hover{
-webkit-filter: contrast(200%);z-index: -99px;-moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
-webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
-o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
background-position: bottom right;
}

Damos guardar  :)

Estes efecto se aplicará a todas las imágenes de las entrada (osea que si eres de la que usan muchas imagenes en tu post pues se vera algo raro o.o)..... Si quiseras usarlo sólo para las que tú elijas entonces cambia .post img{ por .transicion { .post img:hover{ por .transicion:hover{
Luego pones este código donde quieres que aparezca tu imagen.

<img class="transicion" src="URL de la imagen" />


  oki ahora explicare algo .....si notas que al pasar el cursor cambia la transicion a un color mas brillante verdad?? bueno si no te gusta ese efecto y quieres que se vea normal solo la transicion (osea que se mueva sin brillar) solo quitale esta linea al codigo -webkit-filter: contrast(200%);z-index: -99px; si te gusta como se ve pues dejaselo asi ^^.

Aqui te dejo otros webkit-filters por si gustas cambiarlo por otro que no sea el contrast :)

 -webkit-filter: grayscale(100%); 
-webkit-filter: sepia(100%); 

Es todo super facil verdad.. espero les guste :) besos


34 comentarios:

  1. A mí me encantan los links con ese efecto :)

    ResponderEliminar
  2. Me encanto pero deverias darle credito a la autora wanaseoby

    ResponderEliminar
    Respuestas
    1. ohh muchisimas gracias no sabes como busque el nombre de esa pagina.. el tuto del link en transicion lo saque de un blog, de hecho le deje dicho a la autora que pusiera el credito y me pasara la pagina para igual yo ponerselo *v* hace tiempo lo vi pero no le di importancia pues iba a cerrar el blog y ahora que lo nesecitaba no lo encontraba hahah arigato >.<

      Eliminar
  3. annyz gracias por compatir esto!!
    pero tengo una pregunta este efecto de las imagenes aplica para la de las entradas o a las que uno pone fuera del blog?

    ResponderEliminar
    Respuestas
    1. mmm si mira tambien puedes poner este efecto en las imagenes de la sidebar osea de fuera como explique arriba:

      Este efecto se aplicará a todas las imágenes de las entrada (osea que si eres de la que usan muchas imagenes en tu post pues se vera algo raro o.o)..... Si quiseras usarlo sólo para las que tú elijas entonces cambia .post img{ por .transicion { y .post img:hover{ por .transicion:hover{
      Luego pones este código donde quieres que aparezca tu imagen.

      <img class="transicion" src="URL de la imagen" />

      pero si quieres ahorrarte el estar poniendo ese codigo en cada imagen de la sidebar...puedes poner este codigo antes de ]]></b:skin> y se aplicara a todas las imagenes de afuera

      img{
      box-shadow: 0px 0px 3px #FFFFFF;
      -moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
      -webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
      -o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
      background: url(http://i47.tinypic.com/3518f7t.png);
      background-position: top left;
      padding: 6px;
      border: 1px solid #fff;
      }
      img:hover{
      -webkit-filter: contrast(200%);z-index: -99px;
      -moz-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-moz-transition-duration: 2s;
      -webkit-transition-property: background-position, border, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-webkit-transition-duration: 2s;
      -o-transition-property: background-position, -webkit-box-shadow, -moz-box-shadow, box-shadow, color;-o-transition-duration: 2s;
      background-position: bottom right;
      }

      saludos :)

      Eliminar
  4. ♥(=W=) Que Lindoos! Me encanta el efecto en las Imagenes queda Muy Bello c: Me gustaria que te pases por mi blog,Opina como quedo el Diseño..Un abrazo Annyz-Kun!

    ResponderEliminar
  5. Buen tuto ^-^
    Lástima que yo tengo Blogskin y esto no funciona en ella.
    Cuando tenga plantilla de diseñador lo pondŕe n.n
    Un beso :3

    ResponderEliminar
  6. Me encantooooooooooooooooooooo

    ResponderEliminar
  7. HOLAA ANNYS!:D me recuerdas?:( la de romans sunn ._. ... No tenia compu perdon por no comentar:(

    ResponderEliminar
    Respuestas
    1. hahha claro que siii nena me da gusto comentes.. no te preocupes me da gusto leer y que tu compu ya este mejor y sigas adelante :)

      Eliminar
  8. Hola!
    Me ha gustado mucho este blog. Es muy bonito e interesante.
    Las entradas son muy buenas, y me han encantado. Te voy a seguir a ver espero que no te importe. ^^
    Si te gustan los mangas, puedes encontrar muchos mangas en pdf en mi blog para leer en ebook, tablet, pc, ipad, etc.
    Esta semana puedes conseguir uno de los anillos de la serie Black Butler (Kurushitsuji) que sorteamos en el blog.
    Espero que te guste!

    ResponderEliminar
  9. Lindisimo efecto ^^, me encanta tu blog, podrias suscribirte al mio? esta medio vacio pq hoy me hice mi cuenta vi unos tutos de tu blog y pongo los creditos manana :)

    ResponderEliminar
  10. Que lindo el tuto,a ver si con el paso del tiempo pones imágenes ^^ de como quedarian en fondo hover =)

    ResponderEliminar
  11. Hola annyz!! genial tuto yo lo habia publicado en mi blog hace muuucho XDDD bueno me gustaria que me des tu correo asi estamos comunicadas, es que, dos cositas:

    1_ me pasas las imagenes que utilizaste en los gifs de esta entrada? claro si los tienes: http://annyzkawaiiworld.blogspot.com.ar/2012/05/gif-mostache.html


    2_ Puedes resubir el pack de imagenes vocaloid en otro servidor? es que me encantan y megaupload murio u.u el link de la entrada: http://annyzkawaiiworld.blogspot.com.ar/2011/06/imagenes-vocaloid.html

    espero tu respuesta ^^ saludos, besos y un abrazo gigaaante :DDD

    ResponderEliminar
    Respuestas
    1. claro solo dame un poquito de tiempo y te dejo link :)

      Eliminar
  12. Hola, sin dudas este blog está cada vez mejor, muy completo e interesante.
    Felicitaciones y saludos desde:
    http://leyendas-de-oriente.blogspot.com/

    ResponderEliminar
  13. Hola!!
    Me hice un nuevo blog http://chamiediciones.blogspot.com/
    te pasás???

    Saludooss

    ResponderEliminar
  14. Hola anny! ahora que ya tengo mi compu estoy usando algunas cosillas ya sabes vengo a darte las gracias por "dejarme" usar las cosas que pones, eres un amor kawaiioso xD etto...ya tenia tiempo que no venia ._. entonces me di cuenta de que las cosas que tenias antes ya no estan y en tu primero blog tampoco (la mayoria) que fue lo que paso? copyright? problemas? se te borro todo? muy saturada la pagina? bueno espero que me contestes :)

    Atte. roseamy (ahora saku gemini e_e)

    ResponderEliminar
    Respuestas
    1. mm no nada de problemas lo que pasa es que como ya casi no estoy al tanto de los blogs por falta de tiempo se me pasa darle el mantenimiento como se debe u.u si gustas dame el link de las cosas que quieres y vere si aun las tengo :)

      Eliminar
  15. Hola Annyz bonita, esta super lindo el tuto!! Todo lo que has hecho, siempre me ha servido de mucho y realmente estoy muy agradecida!!
    Por cierto! tienes un premio en mi blog!!
    http://darkangelnagatsuka.blogspot.com/2013/03/mi-primer-premio.html

    ResponderEliminar
  16. Esta padrisimo!! me encano!! lo usare en mis platillas

    ResponderEliminar
  17. Hey such lovely blog!!!
    No matter what you're sharing, it's always better if you have people to share it with.
    I am a new hand in blog,shall we follow each other and share beauties to each
    Hope to be your friend soon Pls post more!
    I love comment and browse blogs I followed!
    It would be a pleasure to keep in touch.
    may be you can check my blog and sharing everything:
    http://mingmingshuohaode.blogspot.com

    if u follow me,just let me know and I will follow back soon
    waiting for you,dear

    ResponderEliminar
  18. hola amiga en primer lugar te digo que tu blog tiene un diseña muy bonito y me gustaría que nos enlazáramos que dices ? , si te intereza este es mi correo : limalozada@gmail.com

    saludos.

    ResponderEliminar
  19. Hola soy re nueva con esto de los blogs es mas empece uno hoy http://sobreviviendomedicina.blogspot.com.ar/ jajaj ya habia visto tu otro blog y ahora vi este son super kawaii!!!! Lastima que en el otro no pude dejar comentario :( Anyways las imagenes me encantan y super útiles los consejos...
    besos>

    ResponderEliminar
  20. Respuestas
    1. a cuales estrellitas o corazones te refieres diana?

      Eliminar