Change effect to scale whole thumbnail

src/scss/gallery.scss

@@ -30,7 +30,7 @@
   box-sizing: border-box;
   text-align: center;
   color: var(--primary-text-color, white);
-  border: 2px ridge var(--primary-text-color, black);
+  border: 1px solid var(--primary-color);
   border-radius: var(--ha-card-border-radius, 4px);
 
   // Folder background color should match the thumbnail element background

src/scss/thumbnail-feature-event.scss

@@ -18,8 +18,6 @@ img, ha-icon {
   // should be clipped to fill the thumbnail div whilst maintaining
   // aspect-ratio.
   object-fit: cover;
-
-  transition: transform 0.2s linear;
 }
 
 ha-icon {
@@ -31,7 +29,3 @@ ha-icon {
   border: 1px solid rgba(255,255,255,0.3);
   box-sizing: border-box;
 }
-
-img:hover {
-  transform: scale(1.04);
-}

src/scss/thumbnail-feature-recording.scss

@@ -16,12 +16,6 @@
   box-sizing: border-box;
 
   color: var(--primary-text-color);
-
-  transition: transform 0.2s linear;
-}
-
-:host(:hover) {
-  transform: scale(1.04);
 }
 
 div {

src/scss/thumbnail.scss

@@ -6,6 +6,8 @@
   // Ensure control icons are relative to the thumbnail.
   position: relative;
   overflow: hidden;
+
+  transition: transform 0.2s linear;
 }
 
 :host(:not([details])) {
@@ -22,6 +24,10 @@
   background-color: var(--primary-background-color, black);
 }
 
+:host(:hover) {
+  transform: scale(1.04);
+}
+
 ha-icon {
   position: absolute;
   border-radius: 50%;