Jquery image overlay

I have a dynamic image gallery, the image for which are pulled from a database. What I need to do is to overlay the image with a colour, then remove the colour on mouseover. The colour is an 80% tint of blue.

I've found something similar on this forum which does the reverse of what I want - it adds the colour on mouseover (using Jquery) rather than removing it. However I'm not a Jquery expert and can't figure out how to re-write the script to set the colour initially, the remove it on mouseover.

Here's the current code:

<script type="text/javascript">
$(document).ready(function() {
$('#project1 a开发者_JS百科').bind('mouseover', function(){
    $(this).parent('div').css({position:'relative'});
    var img = $(this).children('img');
    $('<div />').text(' ').css({
        'height': img.height(),
        'width': img.width(),
        'background-color': '#4f99ff',
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'opacity': 0.8
    }).bind('mouseout', function(){
        $(this).remove();
    }).insertAfter(this);
});

});
</script>

<div id="project1"><a href="#"><img src="image.jpg" width="614" height="218" alt="" /></a></div>

Can anyone suggest how to reverse the above function to do what I need?

Thanks in advance!

You can simply add the overlay div statically on the page, on each image, and then hide it on mouseover, and show it on mouseout, with a nice fading effect. That would be something like this, which is simpler from a JS point of view:

<style>
#project1 {
    position: relative;
}
.blueoverlay {
    background-color: #4f99ff; position: absolute; top: 0; left: 0; opacity: 0.8;
}
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('#project1').mouseover(function() {
        $(this).find('.blueoverlay').hide();
    })
    .mouseout(function(){
        $(this).find('.blueoverlay').show();
    });
});
</script>

<div id="project1">
    <a href="#"><img src="http://www.chachatelier.fr/programmation/images/mozodojo-original-image.jpg" width="300" height="300" alt="" /></a>
    <div class="blueoverlay" style="width:300px;height:300px;">&nbsp;</div>
</div>

That seems overly-complicated. My solution would be to display a div with the photo as a background-image, then, inside the div, put a semi-transparent .png of the colour you want. Assuming the div has the class "photoholder" and the semi-transparent image has the class "overlay":

<div class="photoholder"><img src="mypng.png" class="overlay" /></div>
<script>
    $(".photoholder").mouseenter(function() {
        $(".overlay").hide();
    }).mouseleave(function() {
        $(".overlay").show()
    });
</script>

See the .bind parts ($('#project1 a').bind('mouseover', function(){ and }).bind('mouseout', function(){ )? Just reverse the mouseover and mouseout parts, and it should work.