When making an IO card the image does not load centered, and I end up having to press F every time, I don’t get why the image doesn’t fit to the window by default, is there a way to enable that? (it would save a lot of time)
See the attached image of the way most images load.
Another image occlusion related error seems to be that you are not able to zoom into image occlusion cards (and other images) more than by default I use this styling code
html:not(.mobile) img { max-width: 90%; max-height: 90%; }
html:not(.mobile) img:hover { max-width: none; max-height: none; }
img.mobile { max-width: 100%; max-height: 100%; }
The issue seems to be that the mask is zoomed, though the image itself does not zoom like it is supposed to. Maybe the Anki image size code only applies to the masks and for some reason does not affect the underlying IO image?
I think what’s happening here is that the images are stacked on top of each other in the z-axis, so when you move your mouse over it, you’re only hovering over the mask, and not the Original Image, hence the :hover properties (zooming) get applied only to the mask.
Maybe try to wrap both the mask and the image in a div, and apply the hover zoom css to it.
Yes! Thank you that sounds about right! I have no idea how do do that though , so if any of you do that and figure out some grouping code that works please share it here 
Try adding this to the styling:
#io-wrapper:hover {
transform: scale(1.5);
transform-origin: left;
}
Sadly it didn’t really work well
1.5 was a too low number, I tried with some higher ones, but still the mask wouldn’t lie on top. And the zoom level seems to be fixed when you do it like that, so you can’t change it
It’s working for me with the default note template created by the IO addon, on anki 2.1.44.
Try it in a fresh profile with a new, default IO Card template generated by the addon.
Oh and change the second property to transform-origin: top left;, works better that way.
I saw your IMGpur gif, could you please just copy paste your whole styling code? I am running Anki 2.1.45, so it should work for me too, but I could possibly be using the wrong zoom code or doing the IO wrapping wrong.
I created a new profile and used the standard IO enhanced card format- I tried changing it to top left, and with that it doesn’t zoom at all it seems.
#io-wrapper:hover {
transform-origin: top left;,
}
html:not(.mobile) img:hover { max-width: none; max-height: none;
#io-wrapper:hover {
transform: scale(1.5);
transform-origin: top left;,
}
html:not(.mobile) img { max-width: 90%; max-height: 90%; }
img.mobile { max-width: 100%; max-height: 100%; }
(Remember to close off the styling with } wherever it ends
I finally understand. You don’t need the additional zoom code, the reason it didn’t work for me was that I didn’t remove the usual code I have with other non-IO cards html:not(.mobile) img:hover { max-width: none; max-height: none; }
Edit: I will be keeping the code above for other cards, because the drawback with the IO wrapping is that although you are free to zoom out as much as you’d like in normal mode still, the img:hover zoom seems to be fixed for the most part.
How can I credit you in my YT vid, just with your Ankiweb username or do you have a Github page or something?
Just my username will do, though I hardly think it deserves credit. 
Well I couldn’t find anything about IO-wrapping in the Anki manual, that’s for sure. Now to take it one step further, I have made it so that the 1.8 fixed zoom is not applied through touch when you’re on Ankidroid. What do you think, this should work, right?
html:not(.mobile) #io-wrapper:hover {
transform: scale(1.8);
transform-origin: top left;,
I’m not sure if html:not(.mobile) affects the io-wrapper though… ?