Ok, this one is just for fun to show that it can be done .. well almost.
This is a basic html image map with hover effect using just CSS that works in all the latest browsers except Internet Explorer IE8/9/10/11 which sees this as a plain image map with no hover effect, so it still works in these browsers.
The other 'problem' is that it does not validate because of the addition of a <span> element within the <map> element which only allows the <area> elements.
So if you are using Firefox, Chrome, Safari or Opera, just hover the six shapes of the menu to see that shape change color and show a text caption in the central area of the image map.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.