Summary: Because who doesn’t love that gentle zoom of a static image?
Strategy: At first glance, the most obvious way to build this section is by putting the background image directly on the container. However, we want to animate the size/location of the background image while keeping it at a minimum of 100% height and 100% width of the container (at all browser sizes, as well). To account for these variables, the background image is put in a pseudo element. The pseudo element has all the necessary background styles we need, particularly background-size: cover. Now we can vary the height and width of the pseudo element itself, but we can also keep it always at least 100% (relative to the parent).
Notes:
- Be sure to put overflow:hidden on the parent container.
- Rather than animating the widths and heights, try transform: scale combined with transform-origin, to have more control over the zooming direction.
- The iteration count was set to infinite for the sake of the demo. This should be avoided on live sites.
Live Site Demos: One Call Plumbing