O efeito fica assim: acesse essa página e passe o mouse no cabeçalho.
.imgopacidade {-moz-border-radius:0 40px;-webkit-border-radius: 0 40px; border-radius:0 40px; filter:alpha(opacity=62); -moz-opacity:0.62; opacity:0.62; -webkit-transition-duration: .50s; -moz-transition-duration: .50s; transition-duration: .50s; box-shadow: 0 0 3px #ff5970; -moz-box-shadow: 0 0 3px #ff5970; -webkit-box-shadow: 0 0 3px #ff5970;}
.imgopacidade:hover {-moz-border-radius:40px 0px;-webkit-border-radius: 40px 0px; border-radius:40px 0px;filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -webkit-transition-duration: .50s; -moz-transition-duration: .50s; transition-duration: .50s; box-shadow: 0 0 3px #ff5970; box-shadow: 0 0 3px #ff5970; -moz-box-shadow: 0 0 3px #ff5970; -webkit-box-shadow: 0 0 3px #ff5970; }
Após colar o código acima entre as tags <style> e </style> do HTML do seu site, não se esqueça de fazer o que se pede abaixo:
<img src="http://link.da/imagem.png" class="imgopacidade">
Muito simples, né?
Dúvidas? Corra para meu ask-me!
Obrigada Não me acorde! pela ajuda.