html - Vertically position an image inside a div -

i have problem i'd with. thankfully code can flexible, i'll give generic markup.

my major limitation (due way retrieving information database) images cannot background images, otherwise easy.

i want image change when hover on it. have made image twice high need - half colour, half black , white. idea is, image same (a person) - when hover on - see colour version.

i have constructed 'hover' image 200 pixels wide, , 400 pixels high. marked simply:

<div class='staff_profile'>      <h3>staff title</h3>      <div class='staff_image'>          <img src='.....' alt='....' />      </div> </div> 

so figuring need like:

.staff_image {    float: left;    height: 200px;    width: 200px; } 

the trouble - using this, 400px high image displays default in centre of staff_image div - see half black , white photo, , half colour.

i going using jquery hover - need css tips on properties need use to:

1. have image display @ top
2. have image display halfway down

everything try padding , margin seems push content down, , doesn't move actual picture inside @ all. need know how maneuver image tall fixed height div around within div. , none of answers can find here seem help. there lots of them on centering image - centering not want - it's opposite! :)

thanks help.

here go: http://jsfiddle.net/xqxsk/

<div class='staff_profile'>      <h3>staff title</h3>      <div class='staff_image'>          <img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />      </div> </div>  .staff_image {     overflow: hidden;     height: 200px; } .staff_image img {     position: relative; }  .staff_image:hover img {    top: -200px; } 

i'm using css instead of jquery hover. better approach, since works better on touchscreen devices.