Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.

The HTML

Okay let"s get stuck in. First of all we will do the HTML. We will start with a holder div to hold everything (images, price and title). This means it can be floated to the left or right so we could have three or four in a row. Inside the main holding div we will need a div to hold both images. It will have to have a position of relative to hold the absolutely positioned images (when a div is position absolutely it will position itself according to a relatively position container). So in my example the starting HTML should be something like so:

<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  </div>
  </div></pre>
</p>
<h4>The CSS</h4>
<p>Right that"s simple enough isn"t it? Now for the CSS, which is also  very  simple. Let"s just think about it. The only things we really need  to do is make  sure the div holder "temphol" is positioned relatively,  overflow is  hidden and and images inside it are absolute positioned.  The reason we need  overflow to be hidden is that the jquery will just  move the image down. If overflow  is not hidden we will see the image  move down instead of disappearing. I also  included some padding and  background properties to make it look a bit better.
  .temp{
  float:left;
  width:292px;
  margin:20px;
  }
  .temphol{
  background:#efefef;
  border:1px solid #ccc;
  position:relative;
  width:290px;
  height:155px;
  overflow:hidden;
  }
  .temphol img {
  position: absolute;
  top: 7px; left: 7px;
  } 

The JavaScript
Okay you should now be able to see one image in a holding div with a   background. Now we will go over the jquery to get the sliding effect to  work.  First thing to take note – its really simple:
 <script type="text/javascript">
  $(function() {
  $(".temphol").hover(function() {
  $(this).children(".front").stop().animate({ "top" : ‘160px"}, 500);
  }, function() {
  $(this).children(".front").stop().animate({ "top" : ‘7px"}, 300);
  });
  });
  </script>

To get it to work you will need to put the above in your head  section of  your webpage and also include the jquery javascript  framework. You can download  it from their website. You will also need to  add class="front" to the image which you want to show on the  top to start with and also change .temphol in the above snippet to  whatever your image holder class is. In my example you will notice my images  have top:7px.  This is just to create the border effect. You can easily  do it where  your images and position at the very top of the holder div. In this   case you will need to change "top" : ‘7px" in the javascript  snippet above.
 
Adding the new image
Okay so now I will go over adding the new image into the top right.  The  first thing to do is create the image. If the image is a triangle  such as in my  example the image will need to be a PNG on a transparent  background. To  position it is simple; just add a new div after the two  images with a class of  new. Then in your CSS make sure this new class  is position absolutely to the  top right. Here is the code I used in my  example:
 .new{
  background:url(images/new-trans.png) no-repeat top right;
  width:58px;
  height:58px;
  position:absolute;
  right:0;
  top:0;
  }


<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  <div class="new"></div>
  </div>
  </div>

Please note that since you are using a PNG you will have to use a  simple  hack for it to work in internet explorer. 
Making the whole thing into a link
Okay in this section we will make the whole thing into a link. We  can"t make  the images linkable as they will move and also the new image  is positioned over  the top of them. I"m not sure if this is the  easiest way, but it"s the only way  I could get to work. Basically what I  did was add a div which is the same  height and width of the main  holding div and position it absolutely over the  top and make it a link.  It will also need to be transparent otherwise it will  cover up  everything we just created:
The CSS

.thumb{
  position:absolute;
  top:7px;
  left:7px;
  width:276px;
  height:141px;
  text-indent:-999px;
  overflow:hidden;
  background:url(images/blank.gif) repeat;
  }

Then to get it to work simple place the following after the closing div for  new but still in the temphol holder:
 <a href="#" class="thumb">your link</a>

You will notice from the CSS for this to work you will need to create a   blank.gif. This is simply a fully transparent image. This is needed for  this  effect to work in internet explorer. If the background is just  set as none the  link is considered not to exist and therefore not  linkable.