JSFiddle - React, Tailwind, and code Playground

by lmoroz

HTML

<div class="block">
  <div class="sub-block">
  <p>Наведи на меня</p>
  </div>
</div>

CSS

body {
  width: 100%;
  height: 1000px;
  border: 1px solid red;
}

.block {
  width: 200px;
  height: 300px;
  border: 1px solid lightblue;
  
  position: relative;
}

.block:hover {
  background-color: lightblue;
}

.sub-block {
  width: 200px;
  height: 300px;
  border: 1px solid lightgreen;
  
  position: absolute;
  top: 80%;
  right: -80%;
  pointer-events: none;
}

.sub-block p {
  text-align: center;
  margin-top: 130px;
}