31/3/13

[Tutoriales]Link Hover con imagen

Hola chikas ❁◕‿◕❁ que tal?? yo bueno mmm tirando ya que es el penúltimo dia para que empieze otra vez el 3º Trimestre en mi insti o-o estoy asustada pero por lo que tendré de estudiar ಥ_ಥ ayyy que miedito
Bueno me dejo de tonterías y qui traigo el tuto es un tuto muy gracioso ya que es que pasas el cursor por un link y sale una imagen

  1. Plantilla
  2. Edicion HTLM
  3. Buscar : ]]></b:skin> 

Y pegar ates de ]]></b:skin> el siguiente código
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(url de la imagen);
background-position:50% 80%;
background-size:400px;
}
Nota* Esto solo funciona con los links luego sera la version a las imagenes

Versión para las imágenes

  1. Plantilla
  2. Edicion HTLM
  3. Buscar : ]]></b:skin> 
Y pegar ates de ]]></b:skin> el siguiente código
.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(url de la imagen);
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;
}
Nota*Como en el otro solo funcionaba con los links este solo funciona con las imagenes
Creditos {x}

Ver prevew de todo

23 comentarios:

  1. que lindo^^ cuando termine la plantilla de mi otro blog se lo pondre, saludos :)

    ResponderEliminar
  2. Chulaaaasoosss Ö MEee encantaeron. me los guardo para unoo de mis blogs ♥

    ResponderEliminar
  3. casi no me paso por blogger..pero espero que estes bien..

    ResponderEliminar
    Respuestas
    1. muchas gracias victor n.n no pasa nada yo ya mañana no podre hacer nada

      Eliminar
  4. no vi el efecto no supe cual mirar pero habian unos muy hermosos XD

    ResponderEliminar
  5. Buen tuto o.o ...lo probaré en mi blog de pruebas *-*

    ResponderEliminar
  6. por dios todo el mundo comenta menos yop 0___________0
    uhh kumy buena tutorial gracias@@
    saludos!

    ResponderEliminar
  7. gracias por el aporte :3
    Saludos!!

    ResponderEliminar
  8. KUMY!!! -recien recordando- Ese día que me dijiste de tu template, si la ví! -viene la explicación- pasa que soy tan distraida que olvidé comentar aquí xD -memoria pobre- sorry! .............BUENO! pues ya en mi opinión ....están muy bonita *_* la aplicarás aquí en tu blog? :3

    ResponderEliminar
    Respuestas
    1. pues no lo se x.xle faltan algunos retoques y cambios

      Eliminar
  9. Ya que estoy enchulando mi blog y no sé qué ponerle, voy a probar estas cositas, a ver si algo me gusta :D

    ResponderEliminar
  10. Me gusta mucho tu blog ^^
    Aquí me quedo.

    Un beso!!

    ResponderEliminar
    Respuestas
    1. gracias zaebe seras presente de una actividad muy pronto jaja

      Eliminar
  11. Tu y tu blog sois kawais!! un abrazo y gracias por el aporte!

    Un abrazo:

    Jeanne.

    ResponderEliminar
  12. Queee bueen tuutoriaale!!! Me siirven todos MUUUUUCho

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com