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>
как при наведении на блок с id='wrap'
работал :hover
для блока с атрибутом class='close'
cl - это будет вместо close.png и close-white.png