FEAT :: PhotoCard Hold!!

Author: Daybreak312

src/component/body/photocard/PhotoCard.tsx

@@ -17,7 +17,7 @@ export const PhotoCard = (
     const isLiked = new AnyRepository<boolean>(false)
 
     return (
-        <div key={"photo-card" + props.id} className={`flex `}>
+        <div key={"photo-card" + props.id} className={`flex hover:translate-y-[-8%] hover:scale-110 hover:shadow-[0_15px_15px_0_rgba(0,0,0,0.25)] rounded-[25px] animated`}>
             <div onClick={() => {
                 PhotoCardModal(props, setModel, isLiked, toast, setToast)
             }}>

src/component/body/photocard/PhotoCardImage.tsx

@@ -7,6 +7,6 @@ export interface PhotoCardImageProps {
 export const PhotoCardImage = (props: PhotoCardImageProps) => {
     return (
         <img width={props.width} height={props.height} src={props.image}
-             className={`w-[${props.width}] h-[${props.height}] object-cover border-photocard-stroke border-[5px] border-solid rounded-[25px] shadow-lg`}/>
+             className={`w-[${props.width}] h-[${props.height}] object-cover border-photocard-stroke border-[5px] border-solid rounded-[25px] shadow-photo-card`}/>
     )
 }

tailwind.config.js

@@ -6,7 +6,8 @@ module.exports = {
     theme: {
         extend: {
             boxShadow: {
-                'blur-modal': "0 0 80px 80px rgba(0, 0, 0, 0.25)"
+                'blur-modal': "0 0 80px 80px rgba(0, 0, 0, 0.25)",
+                'photo-card': "0px 10px 5px 0px rgba(0, 0, 0, 0.25)"
             }
         },
         colors: {