I have been wondering how the following images can 'slide' up: http://www.fourfather.com/work.html

I don't want to just 'grab' the code, but I would love to know if there is a free script out there for this, or even a tutorial?

You could check their code:

<script type="text/javascript">
$(function() {
$('#featured img').hover(function() {
$(this).animate({ "top": 0 });
}, function() {
$(this).animate({ "top": 10 });
});

});
$(function() {
$('#featuredcap img').hover(function() {
$(this).animate({ "top": 0 });
}, function() {
$(this).animate({ "top": 10 });
});

});
</script>

<div id="featuredcap">
<a href="convellis.html"><img src="img/convellis.jpg" /></a>
<p>Convellis Software develops custom tailored solutions for small and medium size businesses. When the company hit the ground running in early 2009 they saw their immediate need for a web presence paired with a desire to keep it simple. [...]<br /><a class="jump" href="convellis.html">View Project ></a> </p>
</div>

With that you will understand :)

I hope this help you.

I don't want to just 'grab' the code, but I would love to know if there is a free script out there for this, or even a tutorial?
There are plenty of javascript libraries offering fancy effects, eg. http://jquery.com/ http://script.aculo.us/. If those don't suit you a search will find many more.