A simple CSS background image zoom and rotate

A simple method of making a CSS background image zoom and rotate on hover, along with a few extras.
Example 1
The HTML
For each image, 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, and the image should be somewhat larger. The overflow value hides anything outside the bounds of the outer div.
CSS
The inner div hover has a transform value that zooms in 30% and rotates 3 degrees left.
Example 2
Taper, Red, Orange, Smoke
+
Ring, Blue, Point, Sea
+
The HTML
For each image, there's now four divs, with layer-icon becoming visible when the outer div is hovered.
HTML
The CSS
The outer div is the same as above, with the addition of a position value. This allows the layer and layer-icon divs to have a position value of absolute, and display over the inner div.
CSS
The outer div hover event chains and displays the layer-icon div.

Everything above works with IE10+, Edge 12+, Chrome 36+, Firefox 16+, Safari 9+, Opera 23+ and all modern-ish browsers.