Animated Image Changes with background-blend-mode

Opportunities to animate background properties are limited, but previous articles here have shown that it is possible to transition background-blend-mode with a little thought and cleverness. There’s at least one more possibility, shown above.

This example might be thought of as a blend of my “Hover Effect on Images From Different Directions” article and the previous background-blend-mode animation example, by way of an odd series of connections (Nikolay Talanov’s variation of Lea Verou’s take on my first before-and-after image comparator).

The code uses a single <div> element, and some CSS:

div {

max-width: 1200px;

background: url(smoke-boy.jpg), linear-gradient(#00f,#f00);

background-size: contain, 100% 100%;

padding-top: 66.66%;

background-position: 0 0, -1200px 0px;

background-repeat: no-repeat;

background-blend-mode: luminosity;

transition: 3s background-position linear;

margin: 0 auto;

}

div:hover { background-position: 0 0, 0 0; }

The <div> element needs padding due to the fact that it doesn’t actually have any content; the blue-to-red gradient is moved completely outside the area of the container and moved back in on hover.

Photograph by Roma Radchuk, licensed under Creative Commons. Inspect the code for this effect on CodePen