Merge pull request #157 from aslams2020/diagonal

✔️Added Diagonal-Hovering Effect to Each Card!
MastanSayyad · Oct 28, 2024 · b2e3c78 · b2e3c78
2 parents 6e2eaf1 + 24bcecf
commit b2e3c78
Showing 1 changed file with 46 additions and 22 deletions.
diff --git a/contributors.html b/contributors.html
@@ -42,6 +42,7 @@
             gap: 30px;
             padding: 0 10px;
         }
+
         .contributor-card {
             background: #ffffff;
             border-radius: 12px;
@@ -50,18 +51,25 @@
             text-align: center;
             overflow: hidden;
             padding: 20px;
-            position: relative;
         }
+
         .contributor-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(219, 127, 219, 0.2);
-            border-radius: 12px;
-            z-index: 0;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(133deg, #de25b6 50%, #f4caff 51%);
+        /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
+        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+        transform: translate(-100%, -100%);
+        opacity: 0;
+        z-index: -1;
+        }
+        .contributor-card:hover::before {
+        transform: translate(0, 0);
+        opacity: 1;
         }
         .contributor-card:hover {
             transform: translateY(-10px);
@@ -72,23 +80,36 @@
             width: 120px;
             height: 120px;
             margin-top: 15px;
-            border: 3px solid rgb(219, 127, 219);
+            border: 3px solid rgba(213, 6, 213, 0.87);
             z-index: 1;
             position: relative;
+            transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
+        }
+        .contributor-card:hover img {
+        border:  2px solid rgb(153, 0, 255);
+        box-shadow: -1px 2px 27px rgb(255, 4, 184);
         }
+
         .contributor-card h3 {
-            margin: 15px 0 5px;
-            font-size: 1.6em;
-            color: rgb(219, 127, 219);
-            z-index: 1;
-            position: relative;
+        font-size: 1.2em;
+        color: #040404;
+        position: relative;
+        z-index: 1;
+        transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
         }
-        .contributor-card p {
-            margin: 0 0 10px;
-            color: #757575;
-            font-size: 1.1em;
-            z-index: 1;
-            position: relative;
+
+        contributor-card p {
+        font-size: 1.2em;
+        color: #040404;
+        position: relative;
+        z-index: 1;
+        transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+        margin: 0 0 10px;
+        }
+
+        .contributor-card:hover h3 {
+        text-shadow: 1px 1px 2px rgb(4, 230, 230), 0 0 0.2em rgb(196, 0, 210), 0 0 0.8em rgb(0, 14, 108);
+        color: white;
         }
         .contributor-card a {
             display: inline-block;
@@ -105,6 +126,9 @@
             background: rgba(219, 127, 219, 0.8);
             transform: scale(1.05);
         }
+        .contributor-card:hover a {
+            background: rgb(200, 72, 200);
+        }
         #progress-container {
             width: 100%;
             height: 5px;