Efeito transparente nas imagens do blog

Olá pessoal,

Hoje vamos ensinar como deixar as imagens meio transparentes quando colocamos o mouse sobre elas, um efeito muito bacana que deixa seu site ou blog mais profissional.
O código para fazer este efeito pode ser usado em cada imagem separadamente ou em todas as imagens das postagens ou das colunas de menu e ainda no site ou blog intero se preferir.

O código você deve colocar na página editar HTML, depois de body{...}, mas cuidado para não colocar dentro das chaves do body porque tudo que estiver entre elas será modificado.
Então vamos colocar o código para deixarmos as imagens das postagens meio transparentes, faça o login no seu blog, entre em layout, editar HTML, só lembrando é sempre recomendado fazer um backup do seu blog, pois qualquer erro você pode voltar o que era, depois do backup marque a opção expandir modelos de widgets e procure pelo seguinte trecho body, depois do símbolo } você coloca o seguinte código:

.post img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity:
1}
.post a:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity:
0.5}

Da mesma forma que fizemos isso com as postagens poderíamos fazer com a coluna lateral de menu, apenas trocando a palavra post por sidebar ou o nome que tiver a coluna do seu blog.
Espero que tenha sido muito útil esta dica, muito obrigado e até a próxima.



0 comentários:

Postar um comentário

Siga o RL Design

© 2012 Todos os direitos reservados | RL Design 'Blog' | | Desenvolvido por - RL Design