Reflection image hover

Assalamualaikum and hello everybody ... today I want to make a tutorial about reflection effect on image...for example  try hovering over the image above...

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.

img{

padding:4px;

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)))

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

}

img:hover{

opacity: 1;-webkit-box-reflect: below 0px

-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));

}

Done? do comment if you do not understand anything...^^