Question

我到处寻找我无法解决这个问题的方法。我也看过这个网站，但找不到任何东西。

我有一张桌子，每张TD都有一张图片。当我将鼠标悬停在img上时，我希望它向下移动100px但不会在TD之外流动（我希望它在超出TD的边界时被裁剪）。现在它只是向下移动100px并且它没有被削减。这是我的表和CSS：

<table cellspacing="0">
    <tr>
        <td><img src="_images/ARDLThumbLarge.jpg" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="_images/ThousandYearsThumbLarge.jpg" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="_images/TableThumbLarge.jpg" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>

img:hover {
   position:relative;
   top: 103px; 
}

我尝试过使用clip属性，table-layout：fixed，但这只是将我的所有图像移动到同一个位置或让它们相互移动。我没有尝试任何工作，我无法想到任何其他地方。

我只是希望图像向下移动并在超出TD边界时被裁剪。

Answer 1

让我们使用一些更好的标记来实现这一目标。 <table>元素用于表格数据，你所追求的是一个布局。

我们可以使用CSS属性实现相同的效果：放置在父div上的display: table和放置在包含图像的内部div上的display: table-cell。

内部div具有固定高度和overflow: hidden以切断较高的图像。
当每个内部div被悬停时，其图像元素被transform: translateY(50%)向下推动一半高度。这揭示了图像的后半部分。
过渡提供了流畅的动画

实施例

当图像的高度恰好是内部div高度的两倍时，效果最佳。

＆＃13;

.wrapper {
  display: table;
  margin: 0 auto;
}
.wrapper > div {
  display: table-cell;
  overflow: hidden;
  height: 300px;
  position: relative;
  min-width: 200px;
  width: 200px;
}
img {
  position: absolute;
  transition: transform .5s;
  bottom: 0;
}
.wrapper > div:hover img {
  transform: translateY(50%)
}

＆＃13;

<div class="wrapper">
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
  <div>
    <img src="http://i.stack.imgur.com/dnYac.jpg">
  </div>
</div>

＆＃13;

Answer 2

尝试添加overflow:hidden

table td{
    overflow: hidden;
}

DEMO

Answer 3

你可以试试 -

table{
       border-collapse:collapse;
}
table td{
    overflow: hidden;
}

img{
    display: block;
}
img:hover {
   position:relative;
   top: 103px; 
}

<table cellspacing="0">
    <tr>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>

您也可以尝试使用它 -

table{
       border-collapse:collapse;
}
table td{
    overflow: hidden;
}

img{
    position:relative;
    display: block;
}
img:hover {
     -webkit-animation: example 1s 1 ease;
    animation: example 1s 1 ease;
    top:100px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0% {top:0;}
    100% {top: 100px;}
}

/* Standard syntax */
@keyframes example {
    0% {top:0;}
    100% {top: 100px;}   
}

<table cellspacing="0">
    <tr>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="ARDL Thumb" width="270" height="203"></td> 
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="1000 Years Thumb" width="270" height="203"></td>
        <td><img src="http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png" alt="Table Thumb" width="270" height="203"></td>
    </tr>
</table>

我希望也会帮助你。

当它超出TD边界时剪切图像

3 个答案:

实施例