updated css

css/card.css

@@ -9,15 +9,18 @@
     border-radius: 10px;
 }
 
-.cardicon>img {
+.cardicon > img {
     width: 100%;
     height: 100%;
 }
 
 .card {
-    position: absolute;
+    /* position: absolute;
     top: 10px;
-    right:10px;
+    right: 10px; */
+    position: relative;
+    /* top: 10px; */
+    /* right: 10px; */
     padding: 10px;
     border-radius: 10px;
     overflow: hidden;
@@ -28,7 +31,7 @@
     z-index: 10;
 }
 
-.card>.text>.mail {
+.card > .text > .mail {
     position: relative;
     font-size: 17px;
     line-height: 20px;
@@ -37,14 +40,14 @@
     text-decoration: none;
 }
 
-.card>.text>.username {
+.card > .text > .username {
     position: relative;
     margin: 0;
     font-size: 32px;
     line-height: 36px;
 }
 
-.card>.text>.mail::after {
+.card > .text > .mail::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -55,7 +58,7 @@
     transition: 0.3s;
 }
 
-.card>.text>h2::after {
+.card > .text > h2::after {
     content: "";
     position: absolute;
     bottom: 0;
@@ -66,7 +69,7 @@
     transition: 0.3s;
 }
 
-.card>.text {
+.card > .text {
     opacity: 0;
     position: absolute;
     bottom: 30px;
@@ -81,26 +84,29 @@
     }
 
     .card:hover {
+        position: absolute;
+        top: 10px;
+        right: 10px;
         width: 300px;
         height: 300px;
     }
 
-    .card:hover>.cardicon {
+    .card:hover > .cardicon {
         top: 30px;
         right: 30px;
         width: 150px;
         height: 150px;
     }
 
-    .card>.text>.username:hover::after {
+    .card > .text > .username:hover::after {
         width: 50%;
     }
 
-    .card>.text>.mail:hover::after {
+    .card > .text > .mail:hover::after {
         width: 100%;
     }
 
-    .card:hover>.text {
+    .card:hover > .text {
         opacity: 1;
     }
-}
+}