I have a page full of DIVs which contain images.

When I mouse over an image I can highlight it or add a shadow to accent it easily by adding class etc but is there a way to dim every other image instead.

DIVs are loaded into DOM and I would like the DIV currently hovered over to retain 100% or 1 opacity and the rest of the DIVs on the page to fade to say 70% or 0.7 when one DIV is highlighted.

Is this possible?

I have a page full of DIVs which contain images.

When I mouse over an image I can highlight it or add a shadow to accent it easily by adding class etc but is there a way to dim every other image instead.

DIVs are loaded into DOM and I would like the DIV currently hovered over to retain 100% or 1 opacity and the rest of the DIVs on the page to fade to say 70% or 0.7 when one DIV is highlighted.

Is this possible?

• javascript
• jquery
• css

4 Answers 4

CSS only:

jsBin demo

#parent:hover > div{ opacity:0.6; }    /* Fade ALL OUT on parent hover */   
#parent > div:hover{ opacity:1; }      /* Fade in hovered one */

$('div').hover(function() {
    $('div').css({opacity: '0.7'});
    $(this).css({opacity: '1'});
}, function() {
    $('div').css({opacity: '1'})}
);

I think this should work.

What you can do is use a new div as a 'mask'.

You'd have your image div, with z-index:1; for example.

And you also have another div with opacity:50%; position:fixed; top:0; left:0; width:100%; height:100%; z-index:2;. This black div has to be hidden when the page loads (display:none;).

Using javascript, when you mouseover the image div, the white div should change to z-index:3;, and the black div should change to display:block; or similar.

ADDENDUM:

If you don't want an overlay div, but only want to make the other images opaque, the javascript just needs to change the opacity (you can manage these opacities in classes, and then just use JS to switch between them).

The easiest way to do this is probably:

1) Make a translucent overlay that covers the whole page.

2) Clone your DIV and position it on top of the overlay.