#140 Fix card overlay

FCSCOpendata · Dec 19, 2023 · b6a226f · b6a226f
1 parent 84197a9
commit b6a226f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 15 deletions.
diff --git a/components/_shared/carousel/card/Card.tsx b/components/_shared/carousel/card/Card.tsx
@@ -16,7 +16,7 @@ const Card: React.FC<CardProps> = ({ title, icon, image }) => {
   return (
     <>
       <div className="relative w-full bg-black rounded-lg overflow-hidden group min-h-[100px] topic-item z-10">
-        <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+        <span className="absolute left-0 bottom-0 w-full h-full  group-hover:border-b-4 border-[#22B373] rounded-b-l z-30" />
         <div>
           <img
             src={image.url}
@@ -28,9 +28,9 @@ const Card: React.FC<CardProps> = ({ title, icon, image }) => {
           className={`absolute z-20 py-4 bottom-0 inset-x-0 text-white text-m ${AR(
             'pr-5',
             'pl-5'
-          )} leading-4 flex justify-between group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all items-center`}
+          )} leading-4 item-title flex justify-between group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all items-center`}
         >
-          <h3 className="font-avenir font-bold">{title}</h3>
+          <h3 className="font-avenir font-bold ">{title}</h3>
           {!!icon.url && (
             <div
               className={`block overflow-hidden w-[40px] h-[40px] ${AR(

diff --git a/components/home/main/Topics.tsx b/components/home/main/Topics.tsx
@@ -44,9 +44,9 @@ export default function Topics() {
                 <a
                   key={index}
                   href={`${AR('/ar')}/topic/${topic.name}`}
-                  className="group h-full w-full flex flex-stretch"
+                  className="group h-full w-full flex flex-stretch topic-item"
                 >
-                  <div className="relative bg-gray w-full rounded-lg overflow-hidden topic-item">
+                  <div className="relative bg-gray w-full rounded-lg overflow-hidden ">
                     <span className="absolute left-0 z-20 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l " />
                     <Image
                       src={topic.image_display_url}
@@ -57,7 +57,7 @@ export default function Topics() {
                       alt={topic.title}
                       className="w-full h-full object-center object-contain"
                     />
-                    <p className="absolute z-10 py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
+                    <p className="item-title absolute z-10 py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
                       {topic.title}
                     </p>
                   </div>

diff --git a/styles/globals.css b/styles/globals.css
@@ -467,15 +467,8 @@ svg.star-svg {
 }
 
 
-.topic-item:before{
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
+.topic-item:not(:hover) .item-title{
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
   z-index: 1;
-  pointer-events: none;
+
 }