jquery - How do I make an image slide up when the caption is slide up? -

i've created next html snippet: http://jsfiddle.net/4gdmk/ works good, can't find way move captions , image same time up, image isn't visible anymore.

here base html:

<figure>     <img src="http://4.bp.blogspot.com/_1vc-o2p4phq/s1bi97agdoi/aaaaaaaacxs/moo533hzesw/s200/technical_stockphoto2.jpg" alt="stockphoto 1" />     <figcaption>caption text</figcaption> </figure> 

look @ site example: http://etchapps.com/ on blocks can click, , caption shown , image goes up. need, on hover.

does know how make this?

with kind regards

ok, there lot of changes, bear me.

the css has been trimmed down (since effects jquery):

figure {     display: block;     position: relative;     float: left;     width:200px;     height: 200px;     overflow: hidden;     margin: 20px; } figure img {     display: block;     max-width:200px; } figcaption {     position: absolute;     background: black;     background: rgba(0, 0, 0, 0.75);     color: white;     padding: 10px 20px;     width:160px; } 

this cause caption sit hidden out of site below image until ready show it.

now javascript:

//thanks roxon $(function(){     $('figure').on('mouseenter mouseleave', function( e ){         var topos = e.type=="mouseenter" ? $('figcaption',this).innerheight() : 0 ;         $('img', this).stop().animate({margintop: -topos}, 200);     }); }); 

the causes figure when hovered raise height of caption below it, showing caption , hiding top part of image. when mouse leaves set margin default of 0.

updated fiddle: http://jsfiddle.net/nkxcd/1/

using css3 instead of jquery (again per roxon's suggestion)

figure {     display: block;     position: relative;     float: left;     width:200px;     height: 200px;     overflow: hidden;     margin: 20px; } figure img {     display:block;     max-width:200px;     margin-top:0;        -webkit-transition: 0.3s;            transition: 0.3s;   } figcaption {     position: absolute;     background: black;     background: rgba(0, 0, 0, 1);     color: white;     padding: 10px 20px;     width:160px; }  figure:hover img{     margin-top:-40px; } 

css3 fiddle:http://jsfiddle.net/nkxcd/2/