# Gallery Hover Zoom (SCSS)

> Adds rounded corners and a gentle zoom on hover to images in Gallery blocks and classic galleries, with motion turned off for visitors who prefer reduced motion.

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

## Code

```scss
$radius: 6px;
$zoom: 1.06;
$speed: 0.35s;

.wp-block-gallery .wp-block-image,
.gallery .gallery-item {
    overflow: hidden;
    border-radius: $radius;

    img {
        transition: transform $speed ease, filter $speed ease;
    }

    &:hover img,
    &:focus-within img {
        transform: scale($zoom);
        filter: brightness(1.05);
    }
}

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

## Notes

Adjust $radius and $zoom to taste.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Gallery Hover Zoom (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/