Zoom effect on hover when an image is linked

[knice]

• When linked, a Featured image inside the UCSC Query Loop Card pattern will enlarge inside of its bounding box in hover, focus, and active states
• An unlinked Featured image will not do this
• A block style for the image Featured Image block Pattern(?) will toggle this behavior
• Check for other blocks that may use images within their content
• This feature will check for "prefers reduced motion" preferences via a media query

[Herm71]

I did some research on this and made a slight edit above ⬆️ . The UCSC custom Query Loop Card is where this behavior occurs. See below. The Featured Image block behaves this way when it's inside a Post Template block inside a Query Loop block.

A Featured Image block placed on a page/post by itself outside a loop and template with "Link to Page" toggled will not "zoom."

There is also a Co-Author Featured Image block that has a toggle to link to the Author's archive page. I have not yet determined whether it hovers when this option is toggled.

[Herm71]

The UCSC Query Loop Card pattern has transform: scale(1.15); on :hover and :focus when an image is wrapped in a link. I'm not sure how we implement a "block style variation" for this if it is on a pattern?

The styles are in the src/block-patterns/_cards.scss file

/* 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);
			}
		}
	}
}

[Herm71]

The commit above ⬆️ adds the prefers-reduced-motion media query to the <img> element in the src/block-patterns/_cards.scss file per MDN and CSS Tricks.

img {
	transform: scale(1.15);

	@media screen and (prefers-reduced-motion: reduce) {
	  transform: none;
	}
}

Demo:

(note: demo uses Firefox. Firefox and Safari automatically detect the reduce flag, whereas Chrome requires a deeper dive into its settings.)

video1697708358.mp4