jquery - How to lower opacity for everything but the hover in a div -
i have group of images inside div , want divs opacity @ 30% when hover on have image being hovered on stay @ 100%. here example of looking http://www.rickanddrew.com/photography/ appreciate can get.
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 css , use transitions progressively make animation better-looking on browsers 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; }
Comments
Post a Comment