html - Clipping Image when it goes outside TD border -

i've looked everywhere can't think of solution problem. i've looked on site can't find anything.

i have table , each td has image within it. when hover on img want move down 100px not flow outside of td (i want cropped when goes beyond border of td). right moves down 100px , it's not clipped. here table , 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;  } 

i've tried using clip property, table-layout: fixed, moves images same location or makes them move on top of each other. nothing try works , can't think of other places look.

i want images move down , cropped when go beyond borders of td.

let's use better markup achieve this. <table> element made tabular data, , after layout.

we can achieve same affect css property: display: table placed on parent div , display: table-cell placed on inner divs contain images.

• the inner divs given fixed height , overflow: hidden cut off taller images.

• when each inner div hovered, image element pushed down half of height transform: translatey(50%). reveals second half of image.

• the transition provides smooth animation

example

this works best when images same height twice height of inner divs.

.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%)  }

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