Ayuda con efecto hover en un botón

<style>
.container {
width: 200px;
height: 200px;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.close {
background: #df0000;
padding: 8px 16px;
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}

.close.r {
left: 100%;
transform: translateX(-100%);
}

</style>

<div class="container" id="container">
<div class="close" id="close">x</div>
contenido
</div>

<script>
(function(){
let cls = document.getElementById('close'),
	container = document.getElementById('container')
	control = 0;
cls.addEventListener('mouseover', function(){
	if (control==0) {
		cls.classList.add('r');
		control=1;
	}
})
cls.addEventListener('click', function(){
	container.remove();
})
})();
</script>

.close:hover{
	transform: translateX(150px); // de esta manera lo desplazas 150px en el eje X
}

<div onmouseover="this.style.display='none'">[ X ]</div>