Leave image selected with opacity greater than the others in a gallery

0

I have a simple gallery, and when you select an image, that same image is loaded via ajax into a div that is positioned next to that gallery.

When I select the image only the image changes, only I would like to improve the aesthetics. Type, have the image A, B, C and D

I would like that when I select the B image, its opacity would be 1, and the other images with an opacity of 0.7 (this is just an example), and if I selected the C image it would opacity 1 and B would be 0.7

    
asked by anonymous 16.11.2014 / 17:17

1 answer

2

You can create a class for the image gallery and leave all images with an opacity unchecked by default. When the user selects an image, you add a CSS class that indicates that that image is selected and increases its opacity.

.galeria img{
    opacity: 0.5;
}
.galeria img.selecionada{
    opacity: 1;
}
    
16.11.2014 / 19:38