Merge pull request #464 from educlopez/feature/boxers

Add active class to boxer links and update image filter

src/sections/SelectYourBoxer.astro

@@ -146,7 +146,7 @@ const msFadeLuchador = 150
 	boxerLinks.forEach((link) => {
 		link.addEventListener("mouseenter", (event) => {
 			const { id, name, country, countryName } = (event.currentTarget as HTMLElement)?.dataset
-
+			link.classList.add("active")
 			setTimeout(
 				() => {
 					const boxerSrc = `/img/boxers/${id}-big`
@@ -162,6 +162,9 @@ const msFadeLuchador = 150
 				article.getAttribute("data-transition-duration") as unknown as number
 			)
 		})
+		link.addEventListener("mouseleave", () => {
+			link.classList.remove("active")
+		})
 	})
 </script>
 
@@ -224,7 +227,14 @@ const msFadeLuchador = 150
 	.boxer-link:hover .boxer-image {
 		transform: scale(1.05);
 	}
+	.boxer-link .boxer-image {
+		filter: grayscale(100%);
+		transition: filter 0.3s ease;
+	}
 
+	.boxer-link.active .boxer-image {
+		filter: grayscale(0%);
+	}
 	.boxer-link:hover .boxer-link-background {
 		filter: brightness(0.5);
 	}