Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » CSS » Zoom with CSS3

Zoom with CSS3

05/25/2011 by Dux   -   4.6/5 (132 ratings)

CSS3 allows the function of "scaling"(or zoom) on an HTML element. In the example below, the scale is assigned to the pseudo class : hover.

Syntax :
transition: (transition-property) (transition-duration in secondes) (transition-timing-function)
- transition-property : all, css property
- transition-duration : timing secondes
- transition-timing-function : ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier

Update
Added compatibility with IE9 and partial compatibility with older IE

Demo.

pointer over here
CSS3 allows the function of "scaling"(or zoom) on an HTML element. In the example below, the scale is assigned to the pseudo class : hover.
CSS scale

source code



 
<style type="text/css">
.
zoom {
   
width: 200px; padding: 5px; border: 1px solid black;
   -
webkit-transition: all .3s ease-out;
   -
moz-transition: all .3s ease-out;
   -
o-transition: all .3s ease-out;
   
transition: all .3s ease-out;
}
.
zoom:hover {
   -
moz-transform: scale(2);
   -
webkit-transform: scale(2);
   -
o-transform: scale(2);
   
transform: scale(2);
   -
ms-transform: scale(2);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
   
M11=2, M12=-0, M21=0, M22=2);
   }
</
style>

<
div class="zoom">
   
Div content here
</div>

Tested with Safari  Google Chrome  Firefox4  Opera  IE8  
Rate this code     |     Copied : 3080x

Comments for Zoom with CSS3

LaurentR2D2     05/25/2013 02:05
Merci pour ce code qui m'a bien aidé
ej     04/16/2013 19:10
exactly what i looked for
Wolf number 7     03/01/2013 16:01
Thank you .
nik     01/10/2013 08:20
great
jagujailor     12/04/2012 10:33
hi thanks for solving problem
ganchan     10/29/2012 15:20
have you see that all the anchor tags on webkit during transition became thinner ?
Will     10/02/2012 12:15
Bonjour,
est ce que je peux l'attribuer à toute les photos dejà posté sur mon blog?
Dans ce cas je le place ou?

merci
raj     09/24/2012 05:25
Nice code .... great use of ccs3
gromit     08/18/2012 21:26
thanks for the nice code
tom     07/06/2012 00:57
awesome thanks!
Pop     06/13/2012 04:30
Like!
Arun@BLDE     03/16/2012 21:24
Hey Thanks a lot Diploma@t
pm666m     03/08/2012 07:30
suppot IE 8 ?
sdhd     02/23/2012 00:01
usefull :D
devunknown     02/22/2012 11:17
tnx for the tip, works very nice
joel     01/20/2012 21:21
epatant
xixi     10/23/2011 14:19
Super merci beaucoup pour ce code ! Malheureusement il a  un effet de pixellisation sur les animation flash que je n'arrive pas à résoudre ... une idée pour remédier à ce problème ??
Diplom@t     09/29/2011 16:59
Scale for IE:
-ms-transform: scale(2,2);
~Drey     09/22/2011 05:21
FANTASTIC!!! :) Helped me a lot. Thanks Man!
dc     09/09/2011 10:45
FANTASTIC  and IMPRESSED
Thank you
netsi1964     08/30/2011 10:02
Hi,
I love this effect :-) But it has the downside that it always scales from center.
Sometimes you want it to for instance scale from top left.

/Sten
Add a comment Nickname
ZOOM


Infinite zoom CSS3 and Javascript
Zoom with CSS3
Rotate and scale with CSS
Javascript Image magnification