oi, seja bem vindo, por enquanto aqui é administrado por mim vivi, dona do tumblr, imperfeica0 criado no dia 04/06/2012 pra te ajudar com alguns tutoriais, ah, eu não sou muito boa com úteis não, mais vou ver o que é que eu posso colocar ^^ beijinhos e fique a vontade.
Archive Submit Random Bye Bye

criativizarr:
pg o theme 17 :)

Resposta:

Certo linda ;)


Descrição aparece quando passa o mouse na imagem

Bom, aposto que o efeito que você quer é esse:

IMAGEM NORMAL:

IMAGEM COM O MOUSE POR CIMA:

Só quero te dizer que varia a foto pode continuar ai como no exemplo acima, ou pode ficar sem a foto e só com a descrição .. não ache que com links é o mesmo processo, é diferente, tem em outro tuto, mas sim, continue a ver:

primeiramente você terá que ter a foto cole esse código no css :

#ph img {-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;position:fixed;width:100px;height:104px;border:5px solid #000;margin-left:160px;margin-top:200px;}
#ph img:hover {-webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;position:fixed;width:100px;height:104px;border:5px solid #000;margin-left:160px;margin-top:200px;opacity:0.8;} 

e se quiser que fique sem a imagem troque o opacity:0.8; por opacity:0; ou se quiser que fique com a imagem só que a imagem mais fraca ainda coloque:0.5;

e agora é a descrição basta colar esse código no css:

#dsc {position:fixed;overflow:hidden;font-family:verdana;font-size:11px;background:#000;color:#fff;padding:2px;height:100px;text-align:justify;width:96px;margin-top:205px;margin-left:50px;}

pra ficar tudo certinho um por baixo do outro tem que ficar margin-top margin-left ou margin-right em sintonia, ou seja, tem de estar todos iguais.

e por fim obviamente para dar o corpo cole isto no seu html, depois de body:

<div id=”ph">
<img src=”a url da imagem que quiser”>
</div>
<div id=”dsc">
{description}
</div>

e pronto, agora é só creditar se usar. ou haverão consequências.


7 of June | notes | Reblog this!

theme 24&#160;: preview • code
acho que pelo gif dá pra entender qual é o efeito ;)

theme 24 : previewcode

acho que pelo gif dá pra entender qual é o efeito ;)

7 of June | notes | Reblog this!

theme 23&#160;: preview • code
pela foto dá pra perceber qual é o efeito que faz a foto trocar é bem simples mas se você quiser ver ele mais complexo veja a preview.

theme 23 : previewcode

pela foto dá pra perceber qual é o efeito que faz a foto trocar é bem simples mas se você quiser ver ele mais complexo veja a preview.

7 of June | notes | Reblog this!

theme 22&#160;: preview • code

theme 22 : previewcode

7 of June | 1 notes | Reblog this!

theme 21&#160;: preview • code

theme 21 : previewcode

7 of June | 1 notes | Reblog this!

theme 20&#160;: preview • code

theme 20 : previewcode

7 of June | notes | Reblog this!

theme 19&#160;: preview • code

theme 19 : preview code

7 of June | notes | Reblog this!

theme 18&#160;: preview • code

theme 18 : previewcode

7 of June | notes | Reblog this!

theme 17&#160;: preview • code
esse theme tem um hover de papel muito importante, com vários conteúdos dentro, então não é bom explicar é bom que você veja, então olhe a preview.

theme 17 : previewcode

esse theme tem um hover de papel muito importante, com vários conteúdos dentro, então não é bom explicar é bom que você veja, então olhe a preview.

7 of June | notes | Reblog this!