hover effect to website counters

Author: mchirag2002

assets/css/index.css

@@ -20,15 +20,15 @@ body {
   background-color: #212121 !important;
 }
 
-nav > * a,
-nav > * a:hover,
-footer > * a,
-footer > * a:hover {
+nav>* a,
+nav>* a:hover,
+footer>* a,
+footer>* a:hover {
   color: white !important;
   text-decoration: none;
 }
 
-footer > * ul {
+footer>* ul {
   margin: 0;
 }
 
@@ -61,11 +61,9 @@ a:hover {
 
 .login__navbar {
   background-color: none;
-  background-image: linear-gradient(
-    180deg,
-    rgba(40, 40, 40, 0.3),
-    rgba(86, 86, 86, 0.3)
-  );
+  background-image: linear-gradient(180deg,
+      rgba(40, 40, 40, 0.3),
+      rgba(86, 86, 86, 0.3));
 }
 
 .title__logo {
@@ -271,6 +269,7 @@ a:hover {
     -webkit-transform: translateY(-25%);
     transform: translateY(-25%);
   }
+
   100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
@@ -282,6 +281,7 @@ a:hover {
     -webkit-transform: translateY(-25%);
     transform: translateY(-25%);
   }
+
   100% {
     -webkit-transform: translateY(0);
     transform: translateY(0);
@@ -436,6 +436,7 @@ a:hover {
 
 .link__buttons:hover {
   transform: scale(1.1);
+  background-color: #4e9f6a;
 }
 
 .icons {
@@ -552,6 +553,7 @@ a:hover {
 .count__box {
   width: 15rem;
   height: 15rem;
+  margin-bottom: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -560,19 +562,33 @@ a:hover {
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
+  transition: all 0.2s;
 }
 
-.count__box > p:first-child {
+
+
+.count__box>p:first-child {
   font-size: 1.9rem;
   font-weight: 500;
 }
 
-.count__box > p:last-child {
+.count__box>p:last-child {
   padding: 0.25rem 0;
   font-size: 0.8rem;
 }
 
-#moosync__numbers__button {
+.count__box:hover {
+  color: #FAF3E3;
+  width: 16rem;
+  margin-bottom: 0;
+  background-image: url("../img/hexagon-hover.svg");
+  height: 16rem;
+  /* transition: all 0.2s; */
+  transform: scale(1.04);
+}
+
+
+.count__box>#moosync__numbers__button {
   margin-top: 2rem;
 }
 
@@ -650,6 +666,7 @@ a:hover {
 .info__text__3:hover #link__icon {
   transform: scale(1.25);
 }
+
 #link__icon {
   height: 0.75rem;
   width: 0.75rem;
@@ -726,7 +743,7 @@ a:hover {
 }
 
 .list-items-link:hover {
-  color: #80ed99 !important; 
+  color: #80ed99 !important;
 }
 
 #notice {
@@ -879,7 +896,7 @@ a:hover {
     padding: 0 1rem;
     align-items: center;
     justify-content: space-between;
-    text-align:center;
+    text-align: center;
   }
 
   #left__footer__content {
@@ -1041,15 +1058,18 @@ a:hover {
     width: 75vw;
   }
 }
+
 .all_counts {
   padding: 5rem 0;
   background-color: #212121;
 }
+
 .count_matters_boxes {
   padding-left: 12rem;
   display: flex;
   flex-direction: row;
 }
+
 .countimages {
   height: 283px;
   width: 283px;
@@ -1094,6 +1114,7 @@ a:hover {
 .modal-content-text {
   padding: 100px 20px 100px 20px;
 }
+
 #login-modal-platform-text-pre,
 #login-modal-platform-text-post {
   text-transform: capitalize;
@@ -1207,7 +1228,7 @@ a:hover {
   opacity: 1;
 }
 
-.select__box .options__container.options__active + .selected::after {
+.select__box .options__container.options__active+.selected::after {
   transform: rotateX(180deg);
   top: -6px;
 }
@@ -1373,4 +1394,4 @@ li {
 
 .arrow-li {
   list-style-image: url("../img/ic_round-navigate-next.svg") !important;
-}
+}