JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
  <div class="on test1">
  Тест тест тест
</div>
  <div class="on test2">
  Тест тест тест
</div>
 <div class="on test3">
 Тест тест тест
  </div>
</div>

CSS

*{margin:0;padding:0;}
.test{
  margin:0 auto;
  width:330px;
  position:relative;
  color:#fff;
}
.test1,.test2,.test3 {
  width:100px;
  height:100px;
  position:absolute;
  padding:5px;
}
.test1{
  background:#000;
}
.test2{
  background:#f00;
  left:110px;
}
.test3{
  background:#ff0;
  left:220px;
}
.test1:hover{
  position:absolute;
  width:110px;
  height:110px;
}
.on:hover{
  width:130px;
  height:130px;
  z-index:999;
  margin-left:-15px;
  font-size:120%;
  color:#eee;
  background:green;
}