Pure CSS Background Effect on Mouse Hover

* {
  margin: 0;
  padding: 0;
}
.hero {
  width: 100%;
  height: 100vh;
  background-color: red;
  position: relative;
  overflow: hidden;
  position: relative;
}
.hero span {
  float: left;
  width: 10%;
  padding-bottom: 10%;
  transition: 2s ease;
}
.hero .front-squares {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.hero .front-squares span {
  background-color: transparent;
  position: relative;
  z-index: 3;
}
.hero .front-squares span:nth-of-type(1):hover ~ .back-squares span:nth-of-type(1) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(2):hover ~ .back-squares span:nth-of-type(2) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(3):hover ~ .back-squares span:nth-of-type(3) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(4):hover ~ .back-squares span:nth-of-type(4) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(5):hover ~ .back-squares span:nth-of-type(5) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(6):hover ~ .back-squares span:nth-of-type(6) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(7):hover ~ .back-squares span:nth-of-type(7) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(8):hover ~ .back-squares span:nth-of-type(8) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(9):hover ~ .back-squares span:nth-of-type(9) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(10):hover ~ .back-squares span:nth-of-type(10) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(11):hover ~ .back-squares span:nth-of-type(11) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(12):hover ~ .back-squares span:nth-of-type(12) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(13):hover ~ .back-squares span:nth-of-type(13) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(14):hover ~ .back-squares span:nth-of-type(14) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(15):hover ~ .back-squares span:nth-of-type(15) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(16):hover ~ .back-squares span:nth-of-type(16) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(17):hover ~ .back-squares span:nth-of-type(17) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(18):hover ~ .back-squares span:nth-of-type(18) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(19):hover ~ .back-squares span:nth-of-type(19) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(20):hover ~ .back-squares span:nth-of-type(20) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(21):hover ~ .back-squares span:nth-of-type(21) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(22):hover ~ .back-squares span:nth-of-type(22) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(23):hover ~ .back-squares span:nth-of-type(23) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(24):hover ~ .back-squares span:nth-of-type(24) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(25):hover ~ .back-squares span:nth-of-type(25) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(26):hover ~ .back-squares span:nth-of-type(26) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(27):hover ~ .back-squares span:nth-of-type(27) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(28):hover ~ .back-squares span:nth-of-type(28) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(29):hover ~ .back-squares span:nth-of-type(29) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(30):hover ~ .back-squares span:nth-of-type(30) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(31):hover ~ .back-squares span:nth-of-type(31) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(32):hover ~ .back-squares span:nth-of-type(32) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(33):hover ~ .back-squares span:nth-of-type(33) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(34):hover ~ .back-squares span:nth-of-type(34) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(35):hover ~ .back-squares span:nth-of-type(35) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(36):hover ~ .back-squares span:nth-of-type(36) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(37):hover ~ .back-squares span:nth-of-type(37) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(38):hover ~ .back-squares span:nth-of-type(38) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(39):hover ~ .back-squares span:nth-of-type(39) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(40):hover ~ .back-squares span:nth-of-type(40) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(41):hover ~ .back-squares span:nth-of-type(41) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(42):hover ~ .back-squares span:nth-of-type(42) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(43):hover ~ .back-squares span:nth-of-type(43) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(44):hover ~ .back-squares span:nth-of-type(44) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(45):hover ~ .back-squares span:nth-of-type(45) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(46):hover ~ .back-squares span:nth-of-type(46) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(47):hover ~ .back-squares span:nth-of-type(47) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(48):hover ~ .back-squares span:nth-of-type(48) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(49):hover ~ .back-squares span:nth-of-type(49) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(50):hover ~ .back-squares span:nth-of-type(50) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(51):hover ~ .back-squares span:nth-of-type(51) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(52):hover ~ .back-squares span:nth-of-type(52) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(53):hover ~ .back-squares span:nth-of-type(53) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(54):hover ~ .back-squares span:nth-of-type(54) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(55):hover ~ .back-squares span:nth-of-type(55) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(56):hover ~ .back-squares span:nth-of-type(56) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(57):hover ~ .back-squares span:nth-of-type(57) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(58):hover ~ .back-squares span:nth-of-type(58) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(59):hover ~ .back-squares span:nth-of-type(59) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(60):hover ~ .back-squares span:nth-of-type(60) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(61):hover ~ .back-squares span:nth-of-type(61) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(62):hover ~ .back-squares span:nth-of-type(62) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(63):hover ~ .back-squares span:nth-of-type(63) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(64):hover ~ .back-squares span:nth-of-type(64) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(65):hover ~ .back-squares span:nth-of-type(65) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(66):hover ~ .back-squares span:nth-of-type(66) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(67):hover ~ .back-squares span:nth-of-type(67) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(68):hover ~ .back-squares span:nth-of-type(68) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(69):hover ~ .back-squares span:nth-of-type(69) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(70):hover ~ .back-squares span:nth-of-type(70) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(71):hover ~ .back-squares span:nth-of-type(71) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(72):hover ~ .back-squares span:nth-of-type(72) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(73):hover ~ .back-squares span:nth-of-type(73) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(74):hover ~ .back-squares span:nth-of-type(74) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(75):hover ~ .back-squares span:nth-of-type(75) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(76):hover ~ .back-squares span:nth-of-type(76) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(77):hover ~ .back-squares span:nth-of-type(77) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(78):hover ~ .back-squares span:nth-of-type(78) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(79):hover ~ .back-squares span:nth-of-type(79) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(80):hover ~ .back-squares span:nth-of-type(80) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(81):hover ~ .back-squares span:nth-of-type(81) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(82):hover ~ .back-squares span:nth-of-type(82) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(83):hover ~ .back-squares span:nth-of-type(83) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(84):hover ~ .back-squares span:nth-of-type(84) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(85):hover ~ .back-squares span:nth-of-type(85) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(86):hover ~ .back-squares span:nth-of-type(86) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(87):hover ~ .back-squares span:nth-of-type(87) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(88):hover ~ .back-squares span:nth-of-type(88) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(89):hover ~ .back-squares span:nth-of-type(89) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(90):hover ~ .back-squares span:nth-of-type(90) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(91):hover ~ .back-squares span:nth-of-type(91) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(92):hover ~ .back-squares span:nth-of-type(92) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(93):hover ~ .back-squares span:nth-of-type(93) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(94):hover ~ .back-squares span:nth-of-type(94) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(95):hover ~ .back-squares span:nth-of-type(95) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(96):hover ~ .back-squares span:nth-of-type(96) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(97):hover ~ .back-squares span:nth-of-type(97) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(98):hover ~ .back-squares span:nth-of-type(98) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(99):hover ~ .back-squares span:nth-of-type(99) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares span:nth-of-type(100):hover ~ .back-squares span:nth-of-type(100) {
  background-color: #2a2a2a;
  transition: 0.1s ease;
}
.hero .front-squares .back-squares {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.hero .front-squares .back-squares span {
  background-color: #1d1d1d;
}
.heading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.heading-container h1 {
  margin: 25px 0 0 0;
  color: #fff;
  font-family: "Ubuntu", sans-serif;
  font-size: 28px;
  font-weight: 100;
  letter-spacing: 2px;
}
.heading-container .actions {
  display: table;
  margin: 0 auto;
  position: relative;
  z-index: 99;
}
.heading-container .actions a {
  margin: 0 5px 0 5px;
}
.heading-container .clock {
  display: table;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 6px solid #ff0083;
  border-radius: 100%;
  position: relative;
}
.heading-container .clock:before {
  content: "";
  width: 6px;
  height: 80px;
  background-color: #ff0083;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  transform-origin: bottom;
  animation: timeIcon 12s cubic-bezier(0.95, -1.5, 0.285, 1.85) infinite;
}
.heading-container .clock:after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #ff0083;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes timeIcon {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  8.33% {
    transform: translateX(-50%) rotate(30deg);
  }
  16.66% {
    transform: translateX(-50%) rotate(60deg);
  }
  24.99% {
    transform: translateX(-50%) rotate(90deg);
  }
  33.32% {
    transform: translateX(-50%) rotate(120deg);
  }
  41.65% {
    transform: translateX(-50%) rotate(150deg);
  }
  49.98% {
    transform: translateX(-50%) rotate(180deg);
  }
  58.31% {
    transform: translateX(-50%) rotate(210deg);
  }
  66.64% {
    transform: translateX(-50%) rotate(240deg);
  }
  74.97% {
    transform: translateX(-50%) rotate(270deg);
  }
  83.8% {
    transform: translateX(-50%) rotate(300deg);
  }
  91.63% {
    transform: translateX(-50%) rotate(330deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}