This tutorial has been written for WordPress users and specifically for creating a zoom in and out effect for the Twenty Seventeen theme single post featured images. The effect can, however, be used for any HTML placed images using CSS3.

The default Twenty Seventeen single post featured image.

The default image is still.

The single post featured image with a zoom in & out effect.

Note: The preview below is an animated GIF at a low frame rate which loops. The actual CSS effect is smoother and zooms in and out once.

Where and how to create the zoom in and out effect:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below:

• The number 1.2 used twice is the multiplied size of the zoomed out image. So 1.2 zooms the image out to 20% larger than the original.
• The 15s is the time in seconds to complete both the zoom in and out animation.
• The ‘.single-featured-image-header img’ is the CSS class for the single post featured image in the WordPress Twenty Seventeen theme. Change this to the CSS class for your image(s).

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.2,1.2);
    }
    100% {
        transform: scale(1,1);
    }
}

.single-featured-image-header img {
	animation: zoominoutsinglefeatured 15s forwards;
}

That’s it.