Fix hover effects color (#1596)

Co-authored-by: Marta Wierzbicka <[email protected]>
mdbootstrap · Apr 19, 2023 · 2999ed2 · 2999ed2
1 parent 64f8d05
commit 2999ed2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/demo/sites/components/hover-effects.html b/demo/sites/components/hover-effects.html
@@ -54,8 +54,7 @@
           alt="Louvre" />
         <a href="#!">
           <div
-            class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"
-            style="background-color: rgba(251, 251, 251, 0.2)"></div>
+            class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
         </a>
       </div>
 

diff --git a/site/content/docs/standard/content-styles/hover-effects/index.html b/site/content/docs/standard/content-styles/hover-effects/index.html
@@ -43,8 +43,7 @@
         alt="Louvre" />
       <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: rgba(251, 251, 251, 0.2)"></div>
+          class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
       </a>
     </div>
   </div>
@@ -65,8 +64,7 @@
           alt="Louvre" />
         <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: rgba(251, 251, 251, 0.2)"></div>
+            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsl(0,0%,98.4%,0.2)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
         </a>
       </div>
       {{< /twsnippet/code >}}