​​添加div時的大小增加

Question

我有一個表格，我想要做的是在每個將有 溢出的單元格中放置一個div：隱藏，以便當某人懸停在圖像上時，div將會下降。問題是，通過這樣做隨着div大小的增加而增加。該怎麼辦？ CSS：

.table{ 
position:fixed; 
top:50px; 
left:200px; 
table-layout:fixed; 
} 
.table td p{ 
position:relative; 
margin:0; 
} 
.table td{ 
height:250px; 
width:240px; 
overflow:hidden; 
    } 
    .table td div{ 
position:relative; 
height:50px; 
top:-100px; 
left:0; 
text-align:center; 
z-index:2; 
color:#CCC; 

-webkit-transition: top 0.2s; 
-moz-transition: top 0.2s; 
-o-transition: top 0.2s; 
-ms-transition: top 0.2s; 
    } 
    .table td img{ 
position:relative; 
left:20px; 
top:-5px; 
height:200px; 
width:200px; 

    } 
    .table td:hover div{ 
-webkit-transition: top 0.2s; 
-moz-transition: top 0.2s; 
-o-transition: top 0.2s; 
-ms-transition: top 0.2s; 

top:50px; 
    } 

抱歉，HTML是這樣的：

<table class="table"> 
    <tr> 
     <td><div>description</div><img src="something.jpg" alt="Not Found"><p>Hello</p></td> 
     <td><div>description</div><img src="something.jpg" alt="Not Found"><p>Hello</p></td> 
    </tr> 
</table> 

Answer 1

嘗試使用的位置是：相對於在TD和位置DIV絕對的，就像這樣：

.table td{ 
    position:relative; 
    height:250px; 
    width:240px; 
    overflow:hidden; 
    border:1px solid red; 
} 
.table td div{ 
    position:absolute; 
    height:50px; 
    top:-100px; 
    left:0; 
    text-align:center; 
    z-index:2; 
    color:#CCC; 

    -webkit-transition: top 0.2s; 
    -moz-transition: top 0.2s; 
    -o-transition: top 0.2s; 
    -ms-transition: top 0.2s; 
} 

演示： http://jsfiddle.net/2hU6W/