Feat: 🎉 Add zoom transition on linked image hover. Fixes #340

* Add linked image hover/focus transition CSS
* Remove redundant CSS from UCSC Card
* Resize background image in figure on hover
* Adjust media query
* Expand on comment blocks to explain code

src/scss/block-patterns/_cards.scss

@@ -22,28 +22,6 @@
 	height: 100%;
 }
 
-/* Card images */
-:where(.ucsc__card .wp-block-image),
-:where(.ucsc__card .wp-block-post-featured-image) {
-
-	a {
-		display: block;
-		overflow: hidden;
-
-		img {
-			transition: transform 0.3s ease;
-		}
-
-		&:hover,
-		&:focus {
-
-			img {
-				transform: scale(1.15);
-			}
-		}
-	}
-}
-
 /* Links in card overlines and titles */
 :where(.ucsc__card .has-small-font-size:first-child),
 :where(.ucsc__card .wp-block-image + .has-small-font-size),

src/scss/elements/_links.scss

@@ -61,3 +61,67 @@ a {
 		scroll-margin-top: 11rem;
 	}
 }
+/**
+	* Linked Images hover, focus, active transition
+	*/
+
+/**
+	* Figure elements that have linked images
+	* transition on hover, focus and active
+	* unless a user "prefers reduced motion."
+	*/
+figure:has(a) {
+	a {
+		overflow: hidden;
+		display:block;
+
+		img {
+			transition: transform 0.3s ease;
+		}
+
+		&:focus,
+		&:hover,
+		&:active {
+
+			img {
+				transform: scale(1.15);
+				@media screen and (prefers-reduced-motion: reduce) {
+			  	transform: none;
+				}
+			}
+		}
+	}
+}
+
+/**
+	* Figure elements that have linked background images
+	* transition on hover, focus and active
+	* unless a user "prefers reduced motion."
+	*/
+figure[style^="background-image"]:has(a) {
+	transition: all 0.3s ease;
+	background-size: 100% !important;
+		&:focus,
+		&:hover,
+		&:active {
+			background-size:115% !important;
+		}
+	}
+
+/**
+	* Prefers reduced motion media query
+	*
+	* With a background image, the entire figure element
+	* needs to be wrapped in the media query
+	*
+	*/
+@media screen and (prefers-reduced-motion: reduce) {
+	figure[style^="background-image"]:has(a) {
+		background-size: 100% !important;
+			&:focus,
+			&:hover,
+			&:active {
+				background-size:100% !important;
+			}
+		}
+}