.draganddrop { position: absolute; z-index: 99999; top: 0; left: 0; width: 100%; height: 100%; display: none; background-color: rgba(255, 255, 255, 0); color: #000; text-align: center; transition: background-color 0.25s ease-out; } .draganddrop.over { display: block; background-color: rgba(255, 255, 255, .5); } .draganddrop > span { padding: 16px 8px; background-color: rgba(0, 0, 0, 0); color: #fff; font-size: 15px; font-weight: bold; position: relative; top: 150px; transition: background-color 0.25s ease-out; border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .draganddrop.over > span { background-color: rgba(0, 0, 0, .75); }