JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div id="field-set">
  <input id="some-text" type="text">
  <label for="some-text" id="transition">
  Text to transition
  </label>
</div>
<button>
Some Button
</button>

CSS

#field-set{
  position: relative;
  display: flex;
  align-items: start;
}

#transition {
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 250ms ease-in;
}

#transition:hover {
  backdrop-filter: blur(10px);
  top: -10px;
  left: -10px;
  transform: scale(0.85);
}

#field-set #some-text:focus ~ #transition,
#field-set #some-text:hover ~ #transition {
   top: -10px;
  left: -10px;
  transform: scale(0.75);
  backdrop-filter: blur(10px);
}