Down Effect.
Então, eu não sou muito boa na parte de efeitos e essas coisas não, mas eu tentei fazer algo simples, porém legal, sem muito nhenhenhe e tal. LEIAM O TUTORIAL INTEIRO, SE NÃO NÃO VAI FUNCIONAR. Não basta copiar o código e pá. Ele é meio confuso, e qualquer besteira não vai dar certo.
Visualize o efeito aqui.
Primeiro vamos começar com css. Depois explicarei cada passo dele.
/*** efeito por surmonte-r ***/ #posief {margin-top: NÚMEROpx; margin-left:NÚMEROpx; margin-right:NÚMERO;} #ef img {width:LARGURApx;height:ALTURApx; position:absolute; -webkit-transition-duration: .99s;} #ef:hover img{-webkit-transition-duration: .99s; -webkit-transform:scale(0.0); -moz-transform:scale(0.0); -o-transform:scale(0.5);} #ef {display: inline-block; width:LARGURApx; height:ALTURApx; position:absolute;overflow:hidden; } .titleef {display: inline-block; background: #COR; color: #COR; width:105%; text-align: center; font-size: 10px; margin-left: -3px; margin-top: 0px; line-height: 15px; text-transform: uppercase; font-family: 'Play', sans-serif;} .textef2{background:#COR; width:LARGURA - 5 px; height:700px; color:#fff; text-align:justify; font-family: 'Play', sans-serif; font-size: 10px; -webkit-transition-duration: .99s; margin-top:-NÚMEROpx; padding: 5px; margin-left:-2px;} .textef2:hover {margin-top: 0px;} .textef2 a {display: inline-block; background: #COR; color: #COR; width:105%; text-align: center; font-size: 10px; margin-left: -3px; margin-top: 0px; line-height: 15px; text-transform: uppercase; font-family: 'Play', sans-serif;}
Agora vamos entender o código.
Em #posief é a posição da tua imagem, ou seja, se ela provavelmente ficar no header, tu deve modificar os números dos pixes de acordo com teu header. Se ela estiver só em uma caixa, você pode troca essa div id pela da tua box, enfim, isso é com você.
Em #ef img é a tua imagem, você deve mexer em width e height que é a largura e altura da tua imagem. É de extrema importância que você conheça esses valores, por que se não não vai funcionar. Então mude ali de acordo com a imagem que você usar.
Em #ef:hover img não mexa em absolutamente nada.
Em #ef você vai fazer a mesma coisa que fez no #ef img vai apenas mudar o width e o height.
O .titleef é a faixinha que fica o nome da pessoa. Ali você vai mudar o background, que é a cor do teu fundo, a color que é a cor da tua letra e só.
Em .titleef2 é tipo o fundo da imagem, no meu preview no caso, ta um marrom, então alí você vai mudar o background, e a color. Onde tem width nessa class, você deve colocar a largura da tua imagem menos 5px. Exemplo, minha imagem tem 150px, então ali vou colocar 145px. Nessa class, existe um pequeno problema. Em margin-top você vai ter que ajustar de acordo com o tamanho da imagem e com o tamanho do texto que você vai escrever no efeito. Então, eu antes aconselho você a escrever o que vai querer escrever para depois mexer nisso. Normalmente você vai por de 30 a 10 pixels menos que sua imagem. Por exemplo, na minha preview minha imagem tinha 200px de height, e como o texto que eu escrevi foi grande, coloque -190px no margin-top. Entendem? Muito cuidado quando for mexer nisso, qualquer coisa pode perguntar na ask.
Por fim em .titleef2 a você vai mudar as mesmas coisas que mudou em .titleef ok?
Pronto, depois de modificar o teu código, vamos para o html:
<div id="posief"> <div id="ef"><img src="IMAGEM"> <div class="textef2"> <div class="titleef">NOME AQUI</div> Descrição aqui<br> <a href="LINK"> tumblr pessoal</a> </div></div></div></div>
Pronto, espero que tenham entendido, qualquer dúvida venham na ask e aguardem meu próximo tutorial.