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