lunes, 1 de octubre de 2012

Descripciones En Imagenes

Hola chicas post super rapidito xD aww tengo un monton de pendientes de trabajo tengo 2 semanas que no paro T.T hoy en la tarde me pondre al tanto con los comentarios ok

Primer efecto:

pasa el cursor sobre el




HomeTutorialAfiliadosCreditos
Gracias por visitar Annyz Kawaii Blog n.n Aqui encontraras tutoriales, recursos, juegos y muchas cositas mas. Espero sea de tu agrado y sigas visitandome ^-^

Copia este codigo y pegalo en un gadget html


<center><style type="text/css">
.img-side{
background: #E8E6E6;
color: #000;
width: 270px;
height: 210px;
margin-top:-215px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-side:hover{
opacity:.7
}
</style>
<img src="http://data.whicdn.com/images/38917595/307768_4257352468797_816983723_n_large.jpg" width="270" />
<br />
<div class="img-side">
<br />
<center><span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="URL DE TU ENTRADA" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">NOMBRE DE TU CATEGORIA</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="URL DE TU ENTRADA" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">NOMBRE DE TU CATEGORIA</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="URL DE TU ENTRADA" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">NOMBRE DE TU CATEGORIA</a></span><span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #F8E0F7 1px dashed;-webkit-transition:1s;"><a href="URL DE TU ENTRADA" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">NOMBRE DE TU CATEGORIA</a></span><br /><FONT FACE="arial" SIZE=2 COLOR=#000000>AQUI TU TEXTO..AQUI TU TEXTO..AQUI TU TEXTO..AQUI TU TEXTO..AQUI TU TEXTO</FONT></center></div></center>


***Para ponerlo en la  imagen que tu desees desde la entrada asi como yo puse este ejemplo entonces copia el codigo y pegalo en tu entrada pero en la pestaña HTML no en la de redactar okei? porque sino no se vera el efecto.***

Lo de color azul: ese es el menu... si no lo quieres en la descripcion solo quita esa parte.

Lo de color rosa: esos valores se cambian si la foto es muy grande, pues no se ajustara el fondo blanquesino que aparece, le quedara muy chica la medida..ustedes tendran que ajustarla para que vaya quedando justa.

Por ejemplo:

como ven la imagen quedo muy grande aqui.. tienen que ajustarla con los valores que puse de color rosa





Segundo efecto:

Pasa el cursor sobre la imagen


Gracias por visitar Annyz Kawaii Blog n.n Aqui encontraras tutoriales, recursos, juegos y muchas cositas mas. Espero sea de tu agrado y sigas visitandome ^-^

Copia el siguiente codigo y pegalo antes de ]]></b:skin>


/***IMAGEM FLIP SIMONE (CEREJADOSUNDAE)***/
#imagesm {background: transparent;padding:4px; width:170px;height:200px;-webkit-box-shadow: -1px -1px 12px rgba(50, 50, 50, 0.38);
-moz-box-shadow:    -1px -1px 12px rgba(50, 50, 50, 0.38);
box-shadow:         -1px -1px 12px rgba(50, 50, 50, 0.38);}
#imageside:hover{-webkit-transition-duration: .90s;
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);}
.imageside { padding:4px; width:170px;}
.imageside .imagesm {width:170px;color:#fff;margin-top:-110px;opacity:0;-webkit-transition-duration: .99s;}
.imageside:hover .imagesm {margin-top:10px;opacity:1;-webkit-transition-duration: .99s;transform: rotateY(360deg);-webkit-transform: rotateY(360deg);}
.imageside .descr {width:160px;height:190px;-webkit-transition-duration: .99s;opacity:1;margin-top:-450px;background: rgba(0, 0, 0, 0.5);color:#fff;padding:4px}
.imageside:hover .descr {-webkit-transition-duration: .99s;margin-top:-210px;opacity:1;-webkit-transition-duration: .90s;}
.image{width:170px;height:200px;positon:fixed;-webkit-transition-duration: .90s;;}
.image:hover {-webkit-transition-duration: .90s;
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);}


Luego anda a Diseño >> Añadir un gadget html/javascript y pegar este codigo:

<div class="imageside"><div id="imagesm"><img src="http://25.media.tumblr.com/tumblr_m5sctx1eig1rnkpueo1_500.jpg"class="image"><div class="imagesm"><div class="descr">AQUI TU TEXTITO...AQUI TU TEXTITO.. AQUI TU TEXTITO.. AQUI TU TEXTITO..AQUUI TU TEXTITO</div></div></div></div></div></div>

*** Para poner el efecto en una imagen desde tu la entrada asi como yo puse este ejemplo entonces copia el codigo y pegalo en tu entrada pero en la pestaña HTML no en la de redactar okei? porque sino no se vera el efecto.***
credito del 2 efecto
simone


24 comentarios:

  1. Hola annyz,mira,tengo un problemita: www.my-webteen.blogspot.com ese es mi blog,el problema es este: viste que debajo de mi cabecera hay nua barrita de color CELESTE,ahi es donde aparecen las paginas,yo quiero eliminar esa barrita,las paginas las tengo en el menu ya :( como borro esa barrita?como la saco?no me explicarias,porfavor!!

    ResponderEliminar
    Respuestas
    1. hola

      si veo que tienes un pequenio menu arriba.... mm veo que esta es una plantilla prediseñada no de bloger, por lo general esas barras se llaman NavbarMenu asi que quiza si quitas esa parte se elimina esa barrita de azul.

      por ejemplo: debe estar asi :

      #NavbarMenu {
      bla
      bla
      bla
      blah
      }

      borra desde donde dice navbarmenu { hasta donde esta la llavecita que cierra } das vista previa.. y si ves que se elimino.. guarda ^^ espero te sea de ayuda.. si sigues con problemas no dudes en preguntarte de nuevo n.n besos

      Eliminar
  2. me gusto mucho este truco lo encontre innovador de veras un muy buen truco! gracias

    ResponderEliminar
  3. Lo efectos son muy Lindos... y me han agradado mucho!!
    espero usarlo en mi blog...
    Gracias por este codigo!

    ResponderEliminar
  4. Hoa annyz,No se pero no me funciona el ultimo efecto.Intenté hacer el textito corto,Pero nose que hacer u___u

    ResponderEliminar
  5. Hello Annyz!!!!! como estas? espero y bien... me encanto tu pagina es mas la amo, me baso ara mejorar la mia... lo malo es que no se como likearte TT O TT me podrias ayudar en eso... me agrado tanto tu pagina que quise agregarte pero no se como!!! en todo caso te dejo mi blog... par que me digas... necesito saber tu opinion, aunque no nos conocemos ;_; pero en serio agradeceria mucho tu opinion, yo siento que le falta algo si me podrias ayudar te lo agradeceria http://chuu-yaoi.blogspot.mx/ es este en serio necesito tu opiniongracias

    ResponderEliminar
  6. ANNYZ YA YO SE DONDE SACAS TUS TODAS ESTAS COSAS TU LAS SACAS DE AQUI: http://bpmaker.giffy.me/

    ResponderEliminar
    Respuestas
    1. hahah sip algunas sip.. pero esa direccion la pongo en los creditos de los tutoriales que hago xD

      Eliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. Hola!.
    Crees que podrías ponerte en contacto conmigo por favor??.
    Quisiera comentarte un par de cositas.
    vatenea@hotmail.com

    Gracias.

    ResponderEliminar
  9. Hola!! me encanta mucho entrar en tu blog es mi lindo, aunqe me jode un poco la musica cada vez que entro en un link!! je
    Tu blog creo qe es muy pesado xq cada vez qe entro se me tilda la maquina, o es mi compu la chota jeje! besos

    ResponderEliminar
    Respuestas
    1. jessica tienes razon jejeje a mi tambien me pone loka la musiquita

      Eliminar
  10. Perdóname annyz!!
    no pude responderte porque no estuve en esos días
    me fui de visita con mis tíos :C
    Sobre lo de el numero de casa
    así es la dirección :DD
    por cualquier otra cosa no dudes en decirme por favor n.n

    ResponderEliminar
    Respuestas
    1. aaa y también te envie un mail :DD
      ahí me explico mejor xD

      Eliminar
  11. Hola, no he podido evitar notar que dices que usas la plantilla PICTURE WINDOW y yo quería preguntarte como quitarle la transparencia de la barra lateral...

    Muchas Gracias
    besos

    ResponderEliminar
  12. Hermoso blog! Recién lo he descubierto y todas lo que compartes es hermoso. Las tutos me sirven un montón. Besotes Guapa!

    ResponderEliminar
    Respuestas
    1. de nada marie me da gusto que haya gustado el blog n.n besos y gracias por tu visita.

      Eliminar
  13. Chica! gracias por tus bellos tutos! gracias a este, podré hacer lo que quería para mi próximo layout *_*

    ResponderEliminar
    Respuestas
    1. de nada mary.. me da gusto te haya gustado n.n

      Eliminar
  14. Hola Annyz!Donde tengo que poner mi botón subir para que aparezca en mi blog? y quisiera saber donde puedo hacer textos PNG Gracias (:!

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.