jquerygridclickoverlayaddclass

on click - give a class to all the other li item except current one - grid

I have this grid as you can see:

http://codepen.io/anon/pen/rxBmYa

What i'm trying to do is just on click of one of the list, the image should keep the same, but all the other one should get some black opacity overlay ( same effect as hover).

For that I suppose I need to give a class to all the list item except the current one when i have click on one. and If i click to another one, to remove it to the new one and add it to the previous one.

Is this the current path ?

So far I've add this jquery which add a class to all the div, including the current one so this is not good . . and my overlay doesn't appear but stay behind the image ( which is a background-image)

<script>


    $('ul.thumbs li').on('click', function(){

   $('ul.thumbs li').not(this).addClass('editable');

   });
</script>

Any idea to make this work . . would be incredible !

Thank you guys !

Solution

  • according to me the black opacity overlay is coming from description span so instead of adding editable class make description span opacity to 1 as below

    $('ul.thumbs li').on('click', function(){
   $('ul.thumbs li').find('.description').css('opacity',0);
   $('ul.thumbs li').not(this).find('.description').css('opacity',1);

});