<h1>Hover Me</h1>
 
h1::before {
      transform: scaleX(0);
      transform-origin: bottom right;
    }

    h1:hover::before {
      transform: scaleX(1);
      transform-origin: bottom left;
    }

    h1::before {
      content: "";
      display: block;
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: rgba(153, 221, 255, 0.5);
      z-index: -1;
      transition: transform .3s ease;
    }

    h1 {
      position: relative;
      font-size: 5rem;
    }

    body {
      margin: 0;
      box-sizing: border-box;
      display: grid;
      place-content: center;
    }
Run Pen

External CSS

  1. https://gitcdn.xyz/repo/octoshrimpy/blokkfont/master/blokkfont.css

External JavaScript

This Pen doesn't use any external JavaScript resources.