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.
Opens WPIDE on
Code
$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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.