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