bij verkleinen beeld verschuift een DIV

Ik heb 2 div over elkaar geplaatst.
1 gewone layout.
1 transparant (om layout af te schermen).
Het werkt allemaal prima.
Als ik echter het beeld verklein, dan verschuift de transparante DIV in horizontale richting.

Ik heb al van alles geprobeerd, absolute, relative.
Zelfs de transparante div te plaatsen in de div van de layout.
Maar krijg het niet voor elkaar.
Iemand die me op weg kan helpen?

#transpar {
    position: absolute;
    background-color: #fffff;
    border-radius: 5px;
    margin-top: 0px;
    margin-left: 285px;
    width: 780px;
   -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
	overflow-x: hidden;
        overflow-y: hidden;
    display: none;
	z-index: 10;
}

#galleryWrapper {
    background-color: #213E4A;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px;
    width: 740px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

<div id="transpar"><img src="blank.jpg"></div>
<div id="galleryWrapper">
.
.
.
</div>

[size=xsmall]Toevoeging op 22/06/2017 15:02:31:[/size]

Volgende werkt omdat de transpar in het midden staat van beeld.
Ik heb het nu als volgt opgelost:

    margin-top: 0px;
    width: 780px;
	left: 50%;
	margin-left: -390px;