CSS Zoom

LukyVj

• 14567
• 4
• 0

I've found three cool ways to create a zoom effect in pure CSS3. These are done using:

1. font-size: If you are using a character, then it is possible to zoom in and out by changing the font-size property on hover and combining it with the transition property for a smooth animation.
2. transform: Another method is by using a scale transform in which you just have to specify how much you want the image to be zoomed in like 2x, 3x etc. It can be used for zoom out too by passing the values less than one.
3. width and height: This is the most common and old techniqiue in which we change the dimensions of the element directly via css on hover or click with transitions.
4. width and height: Are zooming by 150% with the zoom propriety .

Take a look at the code to learn more about these techniques. If you know about more texhniques to create a zoom effect using CSS3, feel free to share it.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room