Untitled

<html>
<head></head>
<body>
    <div class="wrapper">
        <div id="bgc"></div>
        <img src="https://diagnostika-clarus.si/uploads/clarus/public/_custom/nevarna_kona_znamenja_in_izrastki2.jpg">
        <span id="x">X</span>
    </div>
    <button id="skrij">Skrij</button>
</body>
</html>

<style>
    .wrapper {
        position: relative;
        max-width: 600px;
        max-height: 600px;
    }

    .wrapper img {
        width: 600px;
        height: 600px;
    }
    #bgc {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgb(173, 216, 230, 0.5);
        display: none;

    }
    #x {
        top: 15px;
        right: 15px;
        position: absolute;
        display: block;
        height: 20px;
        width: 20px;
        line-height: 20px;
        -moz-border-radius: 50%; /* or 50% */
        border-radius: 50%; /* or 50% */
        border: 1px solid black;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
        display: none;

    }
</style>

<script>

var xButton = document.querySelector('#x');
var bgc = document.querySelector('#bgc');
var skrij = document.querySelector("#skrij");
xButton.addEventListener('click', function(e) {
    bgc.style.display = "none";
    xButton.style.display = "none";
    skrij.disabled = false;
});

skrij.addEventListener('click', function(e) {
    bgc.style.display = "initial";
    xButton.style.display = "initial";
    e.target.disabled = true;
})

</script>