Efeito down

Tay ♥

Olá meus fofos, como estão hoje? Eu vou bem, tirando o fato de estar com raiva imensa da minha wi-fi. Além de estar mais lenta doque uma obra do governo, a porcaria da internet fica caindo. Sei lá, hoje eu fiquei revoltada com tudo. Até com alguns comentários posts bem antigos de uma páginas no facebook na época de eleição, a eleição aconteceu a meses atrás e eu fiquei lendo uns comentários dizendo que os nordestinos ferraram o Brasil por mais 4 anos... sendo que a nossa presidenta também ganhou no sudeste e etc ;-;.  E essa foi a minha história que tem nada haver com o assusto do blog. Eu nunca mais vou passar uma madrugada acordada, porque eu realmente fico chata e revoltada sem dormir.


Bom, o efeito down é bem simples, porém eu achei bem fofinho e  Eu achei esse efeito no Tumblr "HTMLuv!" , um tumblr com um layout super ultra mega fofo.

Live Preview - ♥

1- Coloque o seguinte código no seu CSS:

.efeitosf a span{ color: #000; padding: 5px; position: absolute; bottom: auto; left: auto; width: 180px;
 height: 30px; opacity: 0; text-align: left; text-shadow: 1px 1px 1px #fff; -webkit-transition-duration:
 .90s;}
.efeitosf a:hover span{ background: #fff; <strong>height: 210px;</strong> opacity: 0.4;}

2- Depois coloque isso no gadget:

Com link:

<div class="efeitosf"><a href="LINK AO CLICAR NA IMAGEM"><span>NOME QUE APARECE QUANDO PASSA O MOUSE</span><img src="LINK DA IMAGEM" width="160px" height="120px"/> </a></div>

Sem link:

<div class="efeitosf"><a><span>NOME QUE APARECE QUANDO PASSA O MOUSE</span><img src="LINK DA IMAGEM" width="160px" height="120px"/> </div>

Créditos da imagem: Seraphic