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

Question

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?

Answer 1

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

Answer 2

add a class to selected images, and use css to style that class:

$('img').click(function(){
     $(this).toggleClass('selectedIMG');
 });

then in css:

img.selectedIMG{
    border: 2px solid blue;
}