1

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.

WolfHook
  • 38
  • 6
  • you can overlay a div absolutely positioned with a repeated 1x1 transparent png image as background – David Fregoli Feb 06 '13 at 17:24
  • 2
    This any good? http://jsfiddle.net/jb36D/10/ If yes I'll add it as an answer later. Gotta run! – Billy Moat Feb 06 '13 at 17:29
  • Not sure if it is the best solution, but you can add or remove or change the class of those siblings so that they adopt a new css background color with opacity. – captainrad Feb 06 '13 at 17:29
  • Thanks @BillyMoat Your solution put me on the right path but unfortunately it causes a flicker when applying the classes and knowing my client, this will be focussed on until the point of madness. Thank you for posting though, I appreciate it. – WolfHook Feb 07 '13 at 08:59

1 Answers1

1

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/

Lars
  • 101
  • 1
  • 3
  • Thank you for posting. Your example lead me to solve the issue. I actually applied the opacity effect to an extra wrapping div rather than the img tag. The original 'imageHolder' div will include extras like a h2 tag and p tags as it's for a product description as well as an image. Works perfectly and the transition is really smooth. – WolfHook Feb 07 '13 at 09:01
  • Glad to hear it. It was my intro to jsfiddle so we both win. :-) – Lars Feb 07 '13 at 16:40