Y si ese div, contiene otro div que cambia de posición cuando situamos el cursor encima?
<div id="portfolio_boto">
<div id="portfolio_boto_text"><h1>boton</h1></div>
</div>
css:
#portfolio_boto {
display:block;
float:left;
width:300px;
height:200px;
margin:10px;
overflow:hidden;
border: 8px solid #FFF;
-moz-box-shadow:5px 5px 10px rgba(0,0,0,0.4);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}
#portfolio_boto_text {
position:relative;
top:200px;
width:300px;
height:100px;
background: rgba(255,255,255,0.8);
text-align:center;
overflow:hidden;
font-size:12px;
}
#portfolio_boto:hover {
cursor:pointer;
}
#portfolio_boto:hover #portfolio_boto_text {
top:100px;
overflow:none;
-webkit-transition: all 200ms linear; /*safari and chrome */
-moz-transition: all 200ms linear; /* firefox */
-o-transition: all 200ms linear; /* opera */
transition: all 200ms linear;
}