.centeredBar { width: 100%; height: auto; border: none; pointer-events: none; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #centeredBox { opacity: 1; z-index: 2; transition: opacity var(--transition-speed), z-index var(--transition-speed); } .centeredBar#centeredBox.hiddenBox { opacity: 0; z-index: 0; }