function show(state){ document.getElementById('window').style.display = state; document.getElementById('wrap').style.display = state; } #wrap{ display: none; opacity: 0.8; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; background-color: rgba(1, 1, 1, 0.725); z-index: 100; overflow: auto; } #window{ width: 400px; height: 400px; margin: 50px auto; display: none; background: #fff; z-index: 200; position: fixed; left: 0; right: 0; top: 0; bottom: 0; padding: 16px; } .close{ width: 30px; height: 30px; margin-left: 364px; cursor: pointer; transition: 0.4s linear; background-image: url(close.png); background-position: center center; border-radius: 34px; } .close:hover{ background-color: gray; background-image: url(close_white.png); transform: rotate(-180deg); border: 0; border-radius: 34px; } <div onclick="show('none')" id="wrap"></div> <div id="window"> <div class="close" onclick="show('none')">cl</div> <img style="margin: 20px 0 0 50px;" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/ipad.png"> </div> <center><button class="myButton" onclick="show('block')">Показать окно</button></center> as if hovering over a block with id='wrap' worked :hover for a block with an attribute class='close' cl - this will be instead of close.png and close-white.png
