CODEWITHSUNDEEP
jqueryimagehoveropacity
derekS
derekS

Reputation: 25

How to lower opacity for everything but the hover in a div

I have a group of images inside a div and I want the divs opacity to be at 30% when you hover over it but have the image being hovered on to stay at 100%. Here is an example of what I am looking for http://www.rickanddrew.com/photography/ I would appreciate any help I can get.

Upvotes: 0

Views: 2239

Answers (3)

Dustin D
Dustin D

Reputation: 15

The website has a listener for when you hover on an image to apply a 'faded' class to every other image. The javascript they use to implement this is:

function() {
    jQuery('.photo-thumb').hover(

function() {
        jQuery('.photo-thumb').not(this).addClass('faded');
    }, function() {
        jQuery('.photo-thumb').removeClass('faded');
    });
}

And their faded class sets the opacity.

.photo-thumb.faded {
    opacity: 0.3;
}

Upvotes: 0

Blender
Blender

Reputation: 298166

This should work:

$('.images').hover(function() {
    $(this).stop().animate({
        opacity: 1
    }).siblings().stop().animate({
        opacity: 0.3
    });
}, function() {
    $(this).siblings().stop().animate({
        opacity: 1
    });
});

Although I'd do this with CSS and use transitions to progressively make the animation better-looking on browsers that support CSS3 transitions:

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

Demo: http://jsfiddle.net/bZG6T/

Upvotes: 1

Marcelo Rodovalho
Marcelo Rodovalho

Reputation: 923

Opacity dont work this way! If you put opacity 30% in a DIV, everything inside this DIV will receive opacity too.

But you can do this with CSS3 background-color RGBA:

DIV {
    background-color: rgba(200,200,200,1);
}
DIV:hover {
    background-color: rgba(200,200,200,0.3);
}

the fourth parameter is the "ALPHA" of RGBA when 0 is totally invisible and 1 totally visible.

Upvotes: 1

Related Questions