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

Asked

Viewed 182 times

0

I have a simple gallery, and when you select an image, that same image is loaded via ajax in 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, has the image A, B, C and D

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

css

  • When you say "select", would you be hovering over the mouse? Clicking? Using a checkbox?

1 answer

2


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

.galeria img{
    opacity: 0.5;
}
.galeria img.selecionada{
    opacity: 1;
}

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.