Issue #3101460 by trackleft2, kostyashupenko, danahertzberg, Gauravvvv,...

Issue #3101460 by trackleft2, kostyashupenko, danahertzberg, Gauravvvv, lauriii, monymirza, Nitin shrivastava, richa_porwal, Vinodhini.E, bnjmnm, MeenakshiG, smustgrave, Kristen Pol, quietone, andypost, alexpott, ckrina:  Hover effect is shown on the full row instead of a single box

core/themes/claro/claro.info.yml

@@ -155,6 +155,8 @@ libraries-extend:
     - claro/media_library.theme
   media_library/widget:
     - claro/media_library.theme
+  image/admin:
+    - claro/image.admin
 
 regions:
   header: Header

core/themes/claro/claro.libraries.yml

@@ -147,6 +147,12 @@ media-form:
   dependencies:
     - media/form
 
+image.admin:
+  version: VERSION
+  css:
+    component:
+      css/components/image.admin.css: {}
+
 system.admin:
   version: VERSION
   css:

core/themes/claro/css/components/image.admin.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styles for image style admin UI.
+ */
+
+.image-anchor td:not(:hover) {
+  background-color: var(--color-white);
+}
+
+.image-anchor td:hover > div {
+  background-color: transparent;
+}

core/themes/claro/css/components/image.admin.pcss.css

+/**
+ * @file
+ * Styles for image style admin UI.
+ */
+
+.image-anchor td:not(:hover) {
+  background-color: var(--color-white);
+}
+
+.image-anchor td:hover > div {
+  background-color: transparent;
+}