Zoom effect on hover when an image is linked

[knice]

• [x] 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
• [x] An unlinked Featured image will not do this
• [ ] A block style for the image Featured Image block Pattern(?) will toggle this behavior
• [x] Check for other blocks that may use images within their content
• [x] 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.)

https://github.com/ucsc/ucsc-2022/assets/1000543/fa4be53b-00d5-4cec-8c89-4be8afece683