Imagem Refletida Com CSS

Olá depois de muito tempo sem eu aparecer aqui estou eu com um efeito bem bacana pra vocês, esse efeito é bem legal onde agente usa o CSS para fazer com que seja criado um reflexo logo abaixo a imagem como você pode ver na demonstração abaixo..

Demonstração

Adicionando o CSS

Primeiro procure pela seguinte tag:

]]
Apos encontra-la adicione o seguinte código logo acima dela:#up img {margin: 5px;opacity: 0.5;border: 4px solid #4C627B;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.5)));} #up 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)));}

Aplicando o efeito

Visualize e salve, logo apos isso cole o seguinte código abaixo onde deseja que sua imagem aparece: <div id="up">
<img src="URL DA SUA IMAGEM" />
</div> Espero que tenham gostado. =)