CODEWITHSUNDEEP
javascriptjquerycssopacity
user3532793
user3532793

Reputation: 7

Using jQuery to reduce opacity of other elements with a div

I have a block of images with captions and am using slideToggle to show and hide the captions:

    $('.imageholder').hover(function() {
    var $desc = $(this).next();
    $('.description').not($desc).slideUp('fast');
    $(this).next().slideToggle("fast");
  });

Working Fiddle

When an image is clicked, the caption will reveal but I want to simultaneously reduce the opacity of the other images in the containing div (something like this). Would appreciate some help. Thanks.

Upvotes: 0

Views: 212

Answers (3)

Nordine
Nordine

Reputation: 866

With the hover function you can add a function to get your opacity back to 1 when your are not hovering your element. (Here: https://api.jquery.com/hover/)

You can try this:

 $('.imageholder').hover(function() {
   var $desc = $(this).next();
   $('.description').not($desc).slideUp('fast');
   $(this).next().slideToggle("fast");
   $(this).siblings('.imageholder').css({opacity: 0.2});
 },function(){
   $(this).siblings().css({opacity: 1});
 });
.description {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageswrapper">
</div>
<div class="imageholder">
  <img class="img" src="http://placehold.it/350x150" alt="Placeholder">
</div>
<div class="description">
  <p>Text</p>
</div>
<div class="imageholder">
  <img class="img" src="http://placehold.it/350x150" alt="Placeholder">
</div>
<div class="description">
  <p>Text</p>
</div>
<div class="imageholder">
  <img class="img" src="http://placehold.it/350x150" alt="Placeholder">
</div>
<div class="description">
  <p>Text</p>
</div>
</div>

Upvotes: 1

Grim...
Grim...

Reputation: 16953

You can exclude the current element from a jQuery selector like so:

$('.imageholder').not(this)

Here's a fiddle showing the images fading out (you'll have to fade them back up when you mouse out): https://jsfiddle.net/euphemus/bdfv9vg8/3/

Upvotes: 0

Val
Val

Reputation: 17522

Can you try adding $(this).siblings().css({opacity: 0.5}) but I don't think you are looking for opacity here, it's more of a filter to black and white rather than the alpha.

Upvotes: 0

Related Questions