How to highlight an image after selection using css or jquery?

css, html, javascript, jquery

Solution

Try this:

css: use the box-shadow to pop the selected image-

img{border:solid 1px red; margin:10px;}
.selected{
   box-shadow:0px 12px 22px 1px #333;
}

jquery:

$('img').click(function(){
   $('.selected').removeClass('selected'); // removes the previous selected class
   $(this).addClass('selected'); // adds the class to the clicked image
});

Fiddle

Problem

I have multiple images in a page that is selectable by user. User can select any image by simply click on that image. One solution would be to add border to that image but border is already applied on all images. How can i highlight that image after selection? In particular, how can i highlight selected image using css or jquery?

Original source