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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/emmzvO