Using jQuery to highlight a div, whilst greying ou

I'm half way there with this issue but have become stuck. I believe similar issues have been raised in the past but nothing quite what I'm looking for.

I currently have some demo code on jsFiddle which can be viewed here: http://jsfiddle.net/WolfHook/jb36D/

HTML

<div id="thumbsContainer">
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>
<div class="imageHolder">
    Image in Here...
</div>

CSS

#thumbsContainer {
background:#000;
padding:20px;
overflow:auto;}

.imageHolder {
background:#eee;
float:left;
margin:5px;
width:50px;
height:50px;
padding:5px;
border:1px solid #666;}

jQuery

$('#thumbsContainer').children('.imageHolder').hover(function() { $(this).siblings().stop().animate({'opacity':'0.5'}); }, 
function() { $(this).siblings().stop().animate({'opacity':'1'}); });

The desired effect is to have all divs display as per normal, then once you hover over a div, the other surrounding ones grey out or have some sort of overlay added to them. The purpose is to give the impression the div you have your mouse pointer on is highlighted.

You can see the code I have on jsFiddle achieves this but it applies an opacity to each div rather than some sort of overlay and it's this which is causing me problems, on my current project the divs sit above a background image rather than a full black background so the opacity isn't going to work and just makes the whole thing look confusing.

Ideally I would like to apply a div overlay on the unhighlighted divs and this I can style using CSS to give a greyed out effect. At this stage I'm completely open to suggestions on how to achieve the desired effect.

Anyone kind enough to chip in and provide me some pointers?

Much appreciated.

Instead of applying opacity to the imageHolder div, or introducing a new overlay element, why not apply opacity to the contents (e.g. thumbnail image) of the div? The background color of the imageHolder will show through, providing the gray of the "grayed out" effect.

New:

$('#thumbsContainer').children('.imageHolder').hover(function() { 
    $(this).siblings().children('img').stop().animate({'opacity':'0.5'}); }, 
    function() { $(this).siblings().children('img').stop().animate({'opacity':'1'});
});

Sample updating yours with thumbnails inside the imageHolders and a background image behind it all: http://jsfiddle.net/jb36D/11/