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.
Opens WPIDE on
Code
$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 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.