I've this code during my wordpress site for turning the "Featured Image" right into a thumbnail:

<div class="portfolio-item">
<?php
if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
</div>

This is exactly what the website appears like this far: http://www.steakmob.com/porftolio/

I'd like for that images to possess a red-colored overlay around the hover condition. How do i accomplish this? I have attempted other lessons, but I don't understand how to adapt the jQuery and/or Javascript for wordpress and my specific code. Thanks!

Andre is correct. To reply to your question, I'd think about making the look fadeOut using jQuery, to ensure that the backdrop from the a tag shows and also the image is hidden.

For instance:

$(".portfolio-item a").hover(
  function () {
    $(this).find('img').fadeOut("fast");
  }, 
  function () {
    $(this).find('img').fadeIn("fast");
  }
);

You will have to make certain your a element is placed to show:prevent, having a width and height. You may even think about using the hover intent wordpress plugin.

When I stated in comment, you have to use class reputation for portfolio-item, rather than id.

Stated that, this can be used code to overlay hovered images by having an red-colored div:

$(function(){
    $("#portfolio-content .portfolio-item").hover(function(){
        var curElem = $(this).children(); // current image
        $('<div />').addClass('overlay')
                    .css('width',curElem.css('width'))
                    .css('height',curElem.css('height'))
                    .prependTo($(this).children('a'));
        return false;
    }, function(){
       $(this).children('a').children('.overlay').remove();
    });
});

Here is a working fiddle:

http://jsfiddle.net/wus7H/1/