# Featured Image Hover Zoom on Archives (SCSS)

> Adds a gentle zoom to featured images on the blog page, archives and Query Loop blocks when visitors hover over a post, making lists feel more interactive.

- Type: SCSS
- Runs: Site-wide header
- Category: [Archives](https://wpide.com/library/category/archive/)
- Tags: scss, featured-image, hover
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/archive-featured-image-hover-scss/

## Code

```scss
$zoom: 1.05;
$speed: 0.4s;

.wp-block-post-featured-image,
.blog .post-thumbnail,
.archive .post-thumbnail {
    overflow: hidden;

    img {
        transition: transform $speed ease;
    }
}

.wp-block-post:hover .wp-block-post-featured-image img,
.blog article:hover .post-thumbnail img,
.archive article:hover .post-thumbnail img {
    transform: scale($zoom);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-post-featured-image img,
    .post-thumbnail img {
        transition: none;
        transform: none !important;
    }
}
```

## Notes

Motion is switched off for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Featured Image Hover Zoom on Archives (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/