junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-08 11:37:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

successfully grouped textWrapper with wrapper to apply hover text color to the whole card

Browse source
This commit is contained in:
StefanWout 2024-09-06 13:06:43 +01:00
parent e3f0fd6d94
commit 63b0469f5c
1 changed files with 3 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/home/Card.tsx
View file

@ -8,12 +8,12 @@ import Image from "next/image";
const styles = {
wrapper:
"active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-gray-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
"group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
header: "relative mt-2 mx-2 border-red",
imageWrapper: "h-52 rounded-2xl overflow-hidden flex items-center",
wrapperAnime: "transition-all duration-500 ease-in-out",
image: "object-cover mx-auto",
textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center",
textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white",
};
interface CardProps {
@ -37,7 +37,7 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
<div>
<div
onClick={handleClick}
className={[styles.wrapper, styles.wrapperAnime].join(" ")}
className={[styles.wrapper, styles.wrapperAnime].join(" ")}
>
<div className={styles.header}>
<div className={styles.imageWrapper}>