<div>

      <img class="cards" id="img1" border=0 src="./images/blank.gif" style="left:200px">

      <img class="cards" id="img2" border=0 src="./images/blank.gif"  style="left:220px" >

      <img class="cards" id="img3" border=0 src="./images/blank.gif"  style="left:240px" >

      <img class="cards" id="img4" border=0 src="./images/blank.gif"  style="left:260px" >

      <img class="cards" id="img5" border=0 src="./images/blank.gif"  style="left:280px" >

      <img class="cards" id="img6" border=0 src="./images/blank.gif"  style="left:300px" >

</div

That I have positioned to the bottom of the page overlapping each other:

.cards {

      position:absolute;

      top: 420px;

}

When a user hovers over a card I want to decrease its top position thereby lifting the card. If the user leaves the card then I want to return the card to its original top position. If the user clicks on the card I want to change the top and left positions and leave it there. I wrote a lift function in javascript but found out there is a better way to do it in jquery. I was having problems responding to the click event. I hope this is clear. Any questions please ask.

Please help.