test

src/app/raids/raids.component.css

@@ -5,10 +5,16 @@
     flex-direction: column;
     margin-block: 3em;
     color: white;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0.85);
     border-radius: 20px;
     width: 100%;
     padding: 3em 0;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* Added shadow for depth */
+    transition: transform 0.3s ease-in-out; /* Smooth transitions */
+}
+
+.raids:hover {
+    transform: scale(1.02); /* Subtle zoom effect on hover */
 }
 
 .raid-container {
@@ -19,15 +25,21 @@
     max-width: 100%;
     max-height: 100%;
     border-radius: 10px;
+    transition: transform 0.3s ease-in-out; /* Smooth image hover */
 }
 
-/* Titles */
+.raid-container img:hover {
+    transform: scale(1.05); /* Image zoom effect */
+}
 
+/* Titles */
 .raid-name, .raids-title {
     font-family: 'Edu SA Beginner', cursive;
     display: flex;
     justify-content: center;
     font-size: 2rem;
+    letter-spacing: 1.5px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Added text shadow */
 }
 
 .raids-title {
@@ -58,6 +70,11 @@
 .raid-box img {
     max-height: 36px;
     max-width: 37px;
+    transition: transform 0.3s ease-in-out; /* Smooth image hover */
+}
+
+.raid-box img:hover {
+    transform: scale(1.1); /* Image zoom effect */
 }
 
 .raid-box h3 {
@@ -71,15 +88,23 @@
     padding: 0;
 }
 
+/* Add a hover effect for buttons or raid boxes */
+.raid-box:hover {
+    background-color: rgba(255, 255, 255, 0.1); /* Highlight effect on hover */
+    border-radius: 8px;
+    cursor: pointer;
+}
+
 /* Media queries */
 @media all and (min-width: 1140px) {
     .raids-container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         padding: 2em;
+        gap: 1.5em; /* Add space between columns */
     }
 
     .raids {
         width: 75%;
     }
-}
+}