-webkit-transition nift!

by lovromar

HTML

<div id="content">
    <h1>Kitteh Rulz!</h1>
    <p>You gotta love <a href="http://placekitten.com/">http://placekitten.com/</a></p>
    <img src="http://placekitten.com/100/100" />
    <img src="http://placekitten.com/101/100" />
    <img src="http://placekitten.com/102/100" />
    <img src="http://placekitten.com/103/100" />
    <img src="http://placekitten.com/104/100" />
    <img src="http://placekitten.com/105/100" />
    <img src="http://placekitten.com/106/100" />
    <img src="http://placekitten.com/107/100" />
    <img src="http://placekitten.com/108/100" />
    <img src="http://placekitten.com/109/100" />
    <img src="http://placekitten.com/110/100" />
    <img src="http://placekitten.com/111/100" />
    <img src="http://placekitten.com/112/100" /> 
    <img src="http://placekitten.com/113/100" /> 
    <img src="http://placekitten.com/114/100" />
    <img src="http://placekitten.com/115/100" /> 
    <img src="http://placekitten.com/116/100" /> 
    <img src="http://placekitten.com/117/100" />
    <img src="http://placekitten.com/100/100" />
    <img src="http://placekitten.com/101/100" />
    <img src="http://placekitten.com/102/100" />
    <img src="http://placekitten.com/103/100" />
    <img src="http://placekitten.com/104/100" />
    <img src="http://placekitten.com/105/100" />
    <img src="http://placekitten.com/106/100" />
    <img src="http://placekitten.com/107/100" />
    <img src="http://placekitten.com/108/100" />
    <img src="http://placekitten.com/109/100" />
    <img src="http://placekitten.com/110/100" />
    <img src="http://placekitten.com/111/100" />
    <img src="http://placekitten.com/112/100" /> 
    <img src="http://placekitten.com/113/100" /> 
    <img src="http://placekitten.com/114/100" />
    <img src="http://placekitten.com/115/100" /> 
    <img src="http://placekitten.com/116/100" /> 
    <img src="http://placekitten.com/117/100" />
    <img src="http://placekitten.com/114/100" />
    <img...

CSS

*{margin:0; padding:0;position:relative;}
html,body{height:100%;background:#000;oveflow:hidden;font-family:arial;}
#content{margin:50px auto;width:800px;height:600px;border:solid 5px red;overflow:hidden;}
h1{float:left;background:red;color:white;font-size:20px;line-height:100px;width:25%;text-align:center;}
p{float:left;background:red;color:white;line-height:100px;width:75%;text-align:center;}
a{color:white;}
img{float:left;width:100px;height:100px;}

/*ADD SOME -WEBKIT MAGIC*/
#content img{
    /*SETS UP TRANNY*/
    -webkit-transition:all 0.4s ease-in-out;
    /*SETS DEFAULT SCALE*/
    -webkit-transform: scale(1);
    z-index:1;
    opacity:0.7;
}
#content img:hover{
    /*SETS HOVER SCALE*/
    -webkit-transform: scale(1.2);
    opacity:1;
    z-index:2;  
}