There are many ways of doing that.
One is to make your buttons with elements; text, images. Group the elements and set the groups background colour to grey. Have the colour image below the grey one and use JS to change background colour and opacity of the images as needed.
You will need JS to work out which buttons should be selected. This can be complex if you do not know much JS.
There are examples of this already on site…
Because your project is already under way I don’t want to go back and do all the buttons.
So as an alternative I have just thrown together a very rough idea. It is not ideal and not how I would do this mostly if I was starting from scratch.
This one does not allow for a animal to be selected for A and B, they can only appear in A or B.
I simply placed the alternative images under each button and gave each the id of the latin name. and all the same class name.
When a button is clicked it’s ID is added to an array . This array is always limited to two items.
All alternative images are sent backward using z-index
The JS then gets both of the two buttons that are represented in the array and get their alternative title and brings the corresponding alternative images with them as i their id forward.
This is rough and ready…
interatividadesMH2.hype.zip (833.4 KB)