Mouse over an image to see it in its original size
The images can be a bit small, this would help with visibility. Most images will be larger than 130px square so in general this would be larger. You'd have to set a cap on how big you blow it up to.
Consider whether it should go back to normal when the cursor moves beyond the edge of the original image or the blown up image. I think the original.
I address this partially in 816d726. The hover works (including any highlighting and other overlays), but there there are two issues:
- It doesn't scale to its original size. I think it's really better this way, but it could be worth experimenting with scaling to original size up to a cap.
- The hover doesn't go away until you leave the bounds of the newly scaled up image. This is annoying, and would be very annoying if we implemented 1. I tried to get it that the hover goes away if you move beyond the bounds of the original image size, but I couldn't get it to work.
I'm leaving this issue open for now in case we decide to improve it further, but it works pretty well for now.
For this and any other setting, there should be a way to turn it off. The best way to do this will be to make the hover variant a class of its own and if the setting is disabled, use the non-hover variant.
Turns out this doesn't work on all browsers. On chrome this displays weirdly, the z-index isn't doing what it should.
Also before I would consider this done, there needs to be an option in the settings to disable this behaviour.
As of 4d8b850 this is mostly done. All of the above issues have been resolved except:
- Point 2 above (https://github.com/banool/codenames-pictures/issues/6#issuecomment-420901480).
- Scaling to original size. I don't even want this really, it'll be inconsistent since different image sizes could be used.