Efeito Quem Somos

                   Sabe o Quem Somos? Isso Mesmo Hoje voou Ensinar como fazer ele
 Todos os Creditos vai ao Kawaii World, Curioso? Já sabe onde Clicar

Prestem Bastante Atenção

1. Vá em  HTML de F3 e procure por:  ]]></b:skin> acima desse código cole: 

 .eff{width:100px;
height:100px;
position:relative;
overflow:hidden;
float:left;
display:inline;
margin-right:10px;
margin-top:10px;
margin-left:10px;
font-size:14px;
background:#e3e3e3;
border:2px solid #797979;
}
.eff img {
display:block;
width:106px;
height:106px;
text-decoration:none;
border:0px solid #666;
background:#f8c2d9;
position:absolute;
z-index:500;
cursor:pointer;
cursor:hand;
}
.eff.caption {
position:absolute;
z-index:0;
color:#000;
display:block;
width: 160px;
margin-top: 5px;
text-align: center;
}
.eff .caption a.header{
margin:10% 5px 5px 5px;
display:block;
font-size:19px;
font-weight:700;
color:#db8ead;
font-family: Play;
text-align:center;
background:#fff;
}
.eff .caption p {
margin: 3px;
float:center;
text-align:center;
font-family: Silkscreen;
font-size: 8px;
background: #fff;
width: 45px;
padding:1px;
border-radius: 3px;
display:inline-block;
}
.eff .caption p a {
color: #a1cbe6;
}
.clear{
clear:both
}

esse código é super grande Por isso, não vai dá para Explicaar okey?

quem realmente se interessa vai futucar e vai achar..

2.Salve, e adicione um gadget   HTML/JavaScript , Nele cole o seguinte codigo:

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/EBwm3o3xm/jquery-1.4.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/u6pbfuu/cndm3o3wy/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
//if mouse over and mouse out
$('.eff').hover(
function () {
value = $(this).find('img').outerHeight() * -1;
//for left/right if you have different width and height,
//commented out because we are using up/down in this example
//value = $(this).find('img').outerWidth() * -1);
//animate the image
// you can change the sliding direction by changing bottom to left, right or top
// if you changed this, you will have to change the position of the hover out as well
$(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});
},
function () {
//reset the image
// the position property (bottom), it must be same with the on in the mouseover
$(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});
});
//if user clicked on the thumbnail
$('.eff').click(function () {
//grab and execute the first link in the thumbnail
window.location = $(this).find('a:first').attr('href');
});
});
</script>
<div class="eff">
<img src="LINK DA SUA IMAGEM" />
<div class="caption">
<a href="link" class="header">NOME DA PESSOA</a>
<center><p> <a href="LINK1">NOME DO LINK 1</a></p>
<p><a href="LINK 2">NOME DO LINK 2</a></p>
<p><a href="LINK 3">NOME DO LINK 3</a></p> </center> </div>

Atenção não modifique nada até  o </script>  A Unica Tag que pode ser mudada é a que vem abaixo