CSS opacity on page load - html

Question

I'm not great at making websites but am trying to make my own. Basically i split my page up in two, the left side being a menu bar and the right side containing content. To get a 'cool' blur effect over my menu bar i overlay it with a coloured image, where as the user hovers over it, the opacity changes (with a transition).
It is working as intended except when you click on a link and a new page loads, it doesn't register the hover until you move the mouse, this means the opacity of the image is full until you move even a tiny bit, then it jumps to 0.
Ideally when a new page opens and your mouse is already in the left region, the opacity of the overlaying image would already be 0.
#left {
text-indent: 1cm;
width: 23%;
height: 100%;
position: fixed;
background: rgba(51, 51, 51, 1);
}
#right {
padding-top: 2cm;
width: 77%;
height: auto;
position: absolute;
right: 0;
background: white;
}
#img {
position: absolute;
opacity: 0.6;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
color: #000;
left: 0;
}
#left:hover>#img {
opacity: 0;
}
I hope i have given enough information, thanks in advance
Bas

Answer 1

How do you 'load' the page? is it ajax.load or? because if so, that language is already in use and therefor better to make a hover handler function in there because there is no way your CSS file is gonna notice on load wether the mouse is on your picture already or not untill you`ve moved it
Sorry i cant put comments down therefor i wrote here.