Hoe zorg je dat een hover effect alleen werkt op zichtbare afbeeldingen, inplaats van het gehele vierkante pixelgebied?

Ja, dat kan opzich wel. Das geen probleem. het probleem uit eindelijk is: Het zijn 5 plaatjes die elkaar kruisen, elk een lijn met een andere kleur. Als ik dus zorg dat het hover effect op elk plaatje zit, dan veranderen ze allemaal, omdat het hover effect gebonden is tot het kader van het plaatje. Ik wil juist dat het hover effect gebonden is tot alleen het plaatje, niet de transparante rest van het plaatje. Misschien voorbeeld:
Ik heb een rondje en wil dat alleen wanneer ik met mn muis over het rondje ga dat het effect komt, niet als ik in de hoeken zit (van het vierkant). Dit is hetzelfde met mijn lijnen, welke op elkaar staan en als je dus ove reentje gaat, ga je over ze allemaal in feite.

Ah, ik snap 'm. Hmmm... lastig. Ik denk dat het een javascript oplossing moet worden. Zoektermen die ik kan bedenken zijn "css hover non-rectangular hotspots" of "css sprites". Kun je aan de hand van het muiscoordinaat gemakkelijk berekenen welk image je wil swappen? Sprites: http://www.alistapart.com/d/sprites/ala-blobs2.html

Mooi voorbeeld: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Of nog beter (met 'onmouseover'): http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap