Efeito: Hideshow *exclusivo*
Bem, eu me baseei em um efeito que achei no dynamicdrive e dei umas grandes modificadas. Esse é um efeito que serve tanto para moderadores, quanto parceiros, e claro, para outras coisas que vocês inventarem, haha. Até que ficou bonitinho vai x3
Live preview.
Bem, para começar, copie todo o código abaixo e cole em seu css.
a.modch{position:relative; display: block;overflow:hidden;cursor: pointer;width: 100px;height: 100px; margin:5px; float:left; border:1px solid #000} a.modch img{position:absolute;left:0;top:0;width: 100%;height: 100%;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;z-index: 2;clip: rect(0,100px,100px,0);} a.modch:hover img:nth-of-type(1){clip: rect(0,0,100px,0);opacity: 0;} .n{background:#f1cf7d; width:100px; height:100px; color:#555; text-align:center; padding:0 5px 0 5px; display: table-cell; vertical-align: middle; box-shadow:rgba(237, 166, 30, 1) 0px 0px 20px inset; font-family:tahoma; font-size:8px; text-transform: uppercase;} n{position:relative; font-size:15px; color:#111 }
- não se esqueça de alterar o tamanho da imagem e as cores, facilitei algumas alterações deixando em negrito, ok? ah, o valor da height e width do a.modch devem ser os mesmos valores do .n -
Continuando... faça suas modificações do jeito que quiser, e modifique as cores também, depois cole o código abaixo onde quer que o efeito apareça em seu html.
<a href="link" class="modch"><img src="imagem"> <div class="n"><n>Fulano 1</n><br>69 anos, EUA</div> </a> <a href="link" class="modch"><img src="imagem"> <div class="n"><n>Fulano 2</n><br>69 anos, EUA</div> </a>
Então é isso. Espero que tenham gostado do efeito... se gostarem ou usarem, dê like e se puder, creditem. Beijos, mands.