Home
Products
Grids
Blog
Support
Donate
About
   

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.

The example

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

How it works

There's two divs.
HTML
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%.

Browsers that support transform include IE10+, Edge 12+, Chrome 36+, Firefox 16+, Safari 9+ and Opera 56+. See also our follow-up article, A Simple CSS Background Image Zoom and Rotate.

Latest & featured