Zoom in and zoom out image hover

Assalamualaikum...hari nie saya nak buat tutorial tentang zoom in dan jugak zoom out image hover... 2 in 1...

Firstly as usual : Dashboard --> Template --> Edit HTML

For template designer : Denim,simple,watermark...
Search the code    img{   or  img {  or   a img {  then, replace the code with the code I have given below...

For classic template and blogskin...
Search the code   img{  or  img {  then, replace the code with the code I have given below...

If there is no code like above add the code that I have given before  </style>   for blogskin and before
]]></b:skin>   for template designer.

ZOOM IN...

img{

-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;

}

img:hover{

-moz-transform: scale(1.2);

-o-transform: scale(1.2);

-webkit-transform: scale(1.2);

}

ZOOM OUT...

img{
-webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease;
}
img:hover{
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8); }
}

Jadik tak? mestilah jadik kan? ;D kalaw tak jadi jangan malu untuk bertanya...