A Very Simple CSS Background Zoom

A really easy method of creating a CSS background image zoom. Not only is this simple, it comes with wide browser support.

Example

See the Pen A very simple CSS background zoom by Tipue () on CodePen.

The HTML

There's two divs.
HTML

The CSS

There's an outer div that sets the height and/or width of the background. There has to be a set value for either height or width. The overflow value hides anything outside the bounds of the outer div, which is how it works.
CSS
The inner div hover has a transform value that zooms in by 20%.

Browser support

Browsers that support transform include Chrome 49+, IE11+, Edge 16+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+ and Chrome for Android 66+.
More from Tipue

Tipue Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More >

A Responsive Text Input Form Field

When most people want a responsive text input form field they wrap it in a div. There's a more concise way.

More >