How do I go about creating an invert images button?

Question

I have looked at css filters "invert" but i'm struggling to think how a can target all my images (which have the Id=images) to invert with a click on text link. I'd also need to be able to second click the link to remove the invert filter. If anyone has an idea that'd be great.

FYI: All my image are tagged Id=images and are all in the same div. The invert link (text) has it's own div which is fixed, z-index 2000.. (front layer)

Thanks

Answer 1

http://jsfiddle.net/hu8tn0qb/1/

Turn all your id="images" into class="images" (you can't use an id more than once), then add in the code below.

The first block of code is the jQuery that will add the "inverted" class to all images with the class "image" when the div with the id "invert_btn" is clicked. By using .toggleClass it will remove the class when clicked a second time.

$('#invert_btn').click(function() {
  $(".images").toggleClass("inverted");
});

.inverted {
  -webkit-filter: invert(1);
  filter: invert(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>

<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />