commit2

Author: Damini2004

src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import clsx from 'clsx';
 import Image from '@theme/IdealImage';
@@ -26,7 +25,6 @@ const TagComp = React.forwardRef<HTMLLIElement, Tag>(
   ),
 );
 
-
 function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   const tagObjects = tags.map((tag) => ({tag, ...Tags[tag]}));
 
@@ -35,7 +33,6 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
     TagList.indexOf(tagObject.tag),
   );
 
-  
   return (
     <>
       {tagObjectsSorted.map((tagObject, index) => {
@@ -58,7 +55,10 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
 
 function ShowcaseCard({user}: {user: User}) {
   return (
-    <li key={user.title} className="card shadow--md">
+    <li
+      key={user.title}
+      className={clsx('card shadow--md', styles.card)}
+    >
       <div className={clsx('card__image', styles.showcaseCardImage)}>
         <Image img={user.preview} alt={user.title} />
       </div>
@@ -93,4 +93,4 @@ function ShowcaseCard({user}: {user: User}) {
   );
 }
 
-export default React.memo(ShowcaseCard);
+export default React.memo(ShowcaseCard);

src/pages/showcase/_components/ShowcaseCard/styles.module.css

@@ -10,26 +10,18 @@
   height: 150px;
   border-bottom: 2px solid var(--ifm-color-emphasis-200);
 }
-.showcaseCardImage:hover {
-  transform: scale(0.9);
-}
+
 .showcaseCardHeader {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
 }
-.showcaseCardHeader :hover {
-  color: red;
-  text-shadow: 0 0 10px var(--ifm-color-primary);
-}
+
 .showcaseCardTitle {
   margin-bottom: 0;
   flex: 1 1 auto;
 }
-.showcaseCardTitle :hover {
-  color: var(--ifm-color-primary);
-  text-shadow: 0 0 10px whitesmoke;
-}
+
 
 .showcaseCardTitle a {
   text-decoration: none;
@@ -78,7 +70,6 @@
 .showcaseCardBody {
   font-size: smaller;
   line-height: 1.66;
-  text-shadow: 0 0 15px var(--ifm-color-primary);
 }
 .cardFooter {
   display: flex;
@@ -107,7 +98,13 @@
   margin-left: 6px;
   margin-right: 6px;
 }
+.card {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
 
-.tag :hover {
-  text-shadow: 0 0 10px var(--ifm-color-secondary-dark);
+.card:hover {
+  /* transform: translateY(-5px); */
+  transform: scale(1.1);
+  box-shadow: 0 8px 16px white;
 }
+