Make The Web Less Boring Animated Hover Effects

Share Your Love

In this documentation you will learn the hover effects by designing “Make The Web Less Boring“, Letters pop on hover in this fun text animation/web manifesto built with Splitting.js by Andy Bell for Piccalilli.

Designed and Developed By Piccalilli:

See the Pen Make the web less boring by Piccalilli (@piccalilli) on CodePen.


  <span class="intro">Make the web less</span>
  <span class="main" aria-label="boring" data-splitting>Boring</span>


:root {
  --fluid-type-min: 2rem;
  --fluid-type-max: 10rem;
  --fluid-type-target: 5vw;
  --color: #dbe3ea;

body {
  background: #24313c;
  color: var(--color);
  padding: 2rem;
  font-family: "Cabin Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  display: grid;
  place-items: center;

h1 > span {
  line-height: 1;
  font-size: clamp(
    var(--fluid-type-min, 1rem),
    calc(1rem + var(--fluid-type-target, 3vw)),
    var(--fluid-type-max, 1.3rem)
  display: block;

.main {
  --fluid-type-min: 8rem;
  --fluid-type-max: 20rem;
  --fluid-type-target: 20vw;
  font-family: acier-bat-gris, sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 0.7;
  margin-left: -0.06ch;

.main .char {
  cursor: zoom-in;
  transform-origin: center bottom;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.7, 1.8), color 400ms ease;
  color: var(--color);
  box-shadow: none;

.main .char:nth-child(3),
.main .char:nth-child(4) {
  letter-spacing: 0.02ch;

.main .char:hover {
  transform: scale(1.4);
  transition-duration: 200ms;
  text-shadow: 0px 0px 3px black, 0px 0px 20px var(--color);
  z-index: 1;

.main .char:nth-child(1):hover {
  --color: #ffd300;

.main .char:nth-child(2):hover {
  --color: #de38c8;

.main .char:nth-child(3):hover {
  --color: #8b5fda;

.main .char:nth-child(4):hover {
  --color: #86bbd8;

.main .char:nth-child(5):hover {
  --color: #d3f6db;

.main .char:nth-child(6):hover {
  --color: #eb9486;

In Javascript:


Please comment and share this post and wants to improve WhatsApp Us.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 366

Newsletter Updates

Enter your email address below to subscribe to our newsletter