diff --git a/src/app/raids/raids.component.css b/src/app/raids/raids.component.css index a24c7789..0d5b7cbc 100644 --- a/src/app/raids/raids.component.css +++ b/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%; } -} \ No newline at end of file +}