All for Joomla All for Webmasters

Borda hover com opacidade

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.