Custom Legend Bar

Once again i have no idea how to word it so i made a gif of what i want and mapped out the location of where I want things. It would be amazing if someone could help me code the legend bar to do this.



Things to note, the colors at the bottom serve as the group, so I would like them to hyperlink to the group page, not only that but as you can see the bar color and words on the top right change according to which group is highlighted I would like this to also happen. Whilst hovering over a color below I want where it says "when hovered over a group color the group leader and users in group will be listed here." to have the following happen, shows the leader of the group, number of users in the group, and finally the users in the said group (I realize that if I have multiple users in the group around the numbers of 100 it could break the coding so I would like the users in the group to be cropped to a certain size with a scroll bar that will help fix this problem. Where the image of Boruto is, if you noticed when the icon hovers over the image it changes into what I want to be a data base that displays the following: newest user registered to the site, number of members on the site, and number of posts on the site. I would also like the hover to initiate a smooth fade transition from the Boruto Image to the data base.

This was all designed via photoshop and gifed to give an example of what I want over all, I hope that this is doable if so please let me know i can provide any information you need to help with this process

Bump