Update: Play button now only visible on hover

www/content-card-example.js

@@ -128,7 +128,6 @@ class ContentCardExample extends HTMLElement {
         button[name="playButton"] {
           width: 40px;
           height: 40px;
-        background: rgba(0,0,0,0.4);
           border: 2px solid white;
           border-radius: 100%;
           margin: auto;
@@ -136,14 +135,14 @@ class ContentCardExample extends HTMLElement {
           transition: 0.2s;
         }
         button[name="playButton"]:hover {
-        background: orange;
+          background: orange !important;
-        border: 2px solid orange;
+          border: 2px solid orange !important;
         }
         button[name="playButton"]:focus {
           outline: 0;
-        background: orange;
+          background: orange !important;
-        border: 2px solid orange;
+          border: 2px solid orange !important;
-        box-shadow: 0 0 0 3px orange;
+          box-shadow: 0 0 0 3px orange !important;
         }
         
         button[name="playButton"]::after {
@@ -158,12 +157,30 @@ class ContentCardExample extends HTMLElement {
           transition: 0.2s;
         }
   
+        .interactiveArea button[name="playButton"] {
+          background: rgba(0,0,0,0.0);
+          border: 2px solid rgba(255,255,255,0.0);
+        }
+  
+        .interactiveArea:hover button[name="playButton"] {
+          background: rgba(0,0,0,0.4);
+          border: 2px solid rgba(255,255,255,1);
+        }
+  
+        .interactiveArea button[name="playButton"]:after {
+          border-color: transparent transparent transparent rgba(255,255,255,0);
+        }
+  
+        .interactiveArea:hover button[name="playButton"]:after {
+          border-color: transparent transparent transparent rgba(255,255,255,1);
+        }
+    
         button[name="playButton"]:hover:after {
-        border-color: transparent transparent transparent black;
+          border-color: transparent transparent transparent black !important;
         }
     
         button[name="playButton"]:focus:after {
-        border-color: transparent transparent transparent black;
+          border-color: transparent transparent transparent black !important;
         }`;
 
     this.appendChild(style);