JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <span class="right">Вправо</span>
    
  <span class="left">Влево</span>
     
  <span class="top">Вверх</span>
    
  <span class="down">Вниз</span>
     <br/>
    
  <div class="block">Блок</div>
</body>

CSS

span{
position:absolute;
display:block;
width:100px;
height:50px;
margin:10px;
background:silver;
cursor:pointer;
}
.left{
    top:12%;
}
.right{
    top:12%;
    left:40%;
}
.top{
    left:20%;
}
.down{
     top:25%;
    left:20%;
}
.block{
 position:absolute;
 top:50%;
 right:50%;
 width:100px;
 height:50px;
 margin:5px;
 background:gray;
 -webkit-transition:all 2s ease;
 -o-transition:all 2s ease;    
 -moz-transition:all 2s ease;   
}
.right:hover~.block{
 right:10%;   
}
.left:hover~.block{
 right:90%;   
}
.top:hover~.block{
 top:10%;   
}
.down:hover~.block{
 top:90%;   
}