Hi guys. I'm trying to achieve an effect of substituting the squares in this logo as icons that link to different projects when you hover over them, and they would turn back to black squares when you hover away from them:
So far I've tried doing hover-changing image icons, and laid them over the base image's top-right four squares by using coordinates:
It's working well on my screen's resolution and it delivers the effect I'm trying to achieve, but the squares go out of place when I zoom in or out of my screen. This also happens when I view the page in other devices such as phones and iPads,
I've tried working with an image map generator (http://www.image-maps.com/) but it didn't quite work with what I wanted, since it replaced the image of the logo with an enlarged image of the icon as soon as I hover over it:
Could someone please guide me on which solution would be best to fix the problem, and implement the effect I have in mind?