htmlcsscss-animationsbackground-imagebackground-size

CSS: Animate background-size on hover


I have the below CSS / SCSS code:

I've set the background properties in the figure and only changed the background-size property for the hover... but it just jumps to the new size instantly instead of animating smoothly.

Can anyone see why the transition isn't working?

If I set the original background size as 100% then it works however

SCSS:

figure {
    position: relative;
    background-size: cover;
    background-position: center;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    transition: background-size 0.4s ease;

    &:hover {
        background-size: 120%;
    }
}

HTML

<figure style="background-image: url('loremipsum.jpg')"></figure>

Solution

  • The background-size property is not used for smooth transitions; browsers typically don't handle it well. That's why when changing from cover to 120%, the background image updates without animation.

    Instead of trying to animate background-size, place the background image inside the element as a separate block, using an img, and animate that block with transform: scale().

    transform is fully animatable and works smoothly.

    CSS:

    figure {
        position: relative;
        aspect-ratio: 8 / 5;
        overflow: hidden;
    
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
            display: block;
        }
    
        &:hover img {
            transform: scale(1.2);
        }
    }
    

    HTML:

    <figure>
        <img src="loremipsum.jpg" alt="">
    </figure>
    

    The figure sets the size of the space and clips anything that goes beyond it using overflow: hidden.

    The img fills 100% of the width/height of the and uses object-fit: cover to behave like a background that fully covers the area.

    When hovering over the figure, the image smoothly zooms in thanks to transform: scale(1.2).

    So, to sum up: you should remove the background image from the figure and place the image inside it using an img tag. Keep the figure with overflow: hidden and set the image's width and height to 100%, with object-fit: cover, so it fills everything without distortion. Then add a transition on the image for the transform property, and on the figure hover, apply transform: scale(1.2) to the image. This way, when you hover, the image will zoom smoothly because transform is animatable, unlike the background-size you were using before.