Fix mask color on hover for a card (#1594)

Co-authored-by: Marta Wierzbicka <martussky@MacBook-Pro-Marta.local>
mdbootstrap · Apr 19, 2023 · 01a3deb · 01a3deb
1 parent 514b40a
commit 01a3deb
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 11 deletions.
diff --git a/demo/sites/components/cards.html b/demo/sites/components/cards.html
@@ -52,7 +52,7 @@ <h5 class="mb-2 text-xl font-medium text-neutral-900">Card title</h5>
         </p>
         <button
           type="button"
-          class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
+          class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
           Button
         </button>
       </div>
@@ -61,22 +61,36 @@ <h5 class="mb-2 text-xl font-medium text-neutral-900">Card title</h5>
       <br />
       <br />
 
-      <div class="max-w-sm rounded-lg bg-white shadow-lg">
-        <a href="#!">
+      <div
+        class="block max-w-[22rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
+        <div
+          class="relative overflow-hidden bg-cover bg-no-repeat"
+          data-te-ripple-init
+          data-te-ripple-color="light">
           <img
             class="rounded-t-lg"
-            src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
+            src="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg"
             alt="" />
-        </a>
+          <a href="#!">
+            <div
+              class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
+              style="background-color: hsla(0,0%,98%,0.15)"></div>
+          </a>
+        </div>
         <div class="p-6">
-          <h5 class="mb-2 text-xl font-medium text-neutral-900">Card title</h5>
-          <p class="mb-4 text-base text-neutral-700">
+          <h5
+            class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
+            Card title
+          </h5>
+          <p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
             Some quick example text to build on the card title and make up the
             bulk of the card's content.
           </p>
           <button
             type="button"
-            class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
+            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
+            data-te-ripple-init
+            data-te-ripple-color="light">
             Button
           </button>
         </div>
@@ -101,7 +115,7 @@ <h5 class="mb-2 text-xl font-medium text-neutral-900">Card title</h5>
           <div>
             <button
               type="button"
-              class="block rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
+              class="block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg">
               Button
             </button>
           </div>

diff --git a/site/content/docs/standard/components/cards/index.html b/site/content/docs/standard/components/cards/index.html
@@ -495,12 +495,20 @@
   <div class="flex justify-center">
     <div
       class="block max-w-[22rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
-      <a href="#!" data-te-ripple-init data-te-ripple-color="light">
+      <div
+        class="relative overflow-hidden bg-cover bg-no-repeat"
+        data-te-ripple-init
+        data-te-ripple-color="light">
         <img
           class="rounded-t-lg"
           src="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg"
           alt="" />
-      </a>
+        <a href="#!">
+          <div
+            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
+            style="background-color: hsla(0,0%,98%,0.15)"></div>
+        </a>
+      </div>
       <div class="p-6">
         <h5
           class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">