Image Hover and Hotspot

[Mason_G]

Hi!

I’m currently working on a about me page for my portfolio and am running into an issue with hotspots.

Currently the page is set up with a background photo of a desk filled with objects (see img.1), I want to be able to hover over a set of objects, have it change color to show it’s selected, and then upon click show an image in the clear space left in the center.

I first tried with a hotspot, though there was no way to make the selection actually fit the shape of the objects. I ended up masking the individual objects in photoshop and putting images that change opacity when hovered over (see img.2). I tried to put a transparent hotspot above though that blocks some of the hover range on the 2nd layer image. If I put the desired image in with the cutout, it selects in the center as well. Is there any way to go about this without code?

Thanks for any help!

[neueMeta]

hey, I think you will not get around this that easy… even with code.
I would use a transparent round shape (don´t know if it isn´t handled as a rectangle regarding the hover area) and place them as hover trigger above the image… under that I would place the “selected” images that are faded in on hovering the round transparent shape. And if neccessary you could also place other transparent shapes on the edges and above the hover trigger area to block the triggering.

I think its the only non code solution… and I think it works with a bit of tweaking