html - 添加 div 后尺寸会增加

Question

我有一张 table ，我想做的是在每个单元格中放置一个 divoverflow: hidden 这样当有人将鼠标悬停在图像上时，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 中使用 position: relative，在 div 中使用 position absolute，如下所示:

.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/