Image Map

Efeito transparência nas imagens dos posts

Olá, pessoal!

Como agora uma parte do blog eu tenho dedicado a mostrar os layouts que venho fazendo, então também gostaria de compartilhar algumas dicas que vim aprendendo sozinha e que tem me ajudado muito a customizar meus layouts!

Essa dica é uma que estou usando atualmente aqui no Guide4 que é justamente o efeito nas imagens dos posts, o efeito de transparência quando passa o mouse por cima da imagem.


para colocar esse efeito, você deve abrir o HTML do seu blog e procurar (CRTL + F) por ]]></b:skin>


Uma vez encontrando esse trecho, você vai colar o seguinte código acima do trecho buscado:


.post img:hover {filter: alpha(opacity:0.7); KHTMLOpacity: 0.7; MozOpacity: 0.7; -khtml-opacity:.0.7; -ms-filter:"alpha(opacity=70)"; -moz-opacity:0.7; filter:alpha(opacity=70); opacity:0.7;
}


~ Customizando o código: 

No código acima eu coloquei para que a imagem fique com uma opacidade de 70% quando o mouse passar por cima dela, mas você pode aumentar ou diminuir essa opacidade. Se você quiser colocar 40%, por exemplo, onde tiver 0.7 você vai colocar 0.4 e onde tiver 70 você vai colocar 40.

Deu pra entender?

~ Qualquer dúvida, pode perguntar nos comentários ou mandar email pra juliana@guide4.com.br
.




2 comentários:

Related Posts with Thumbnails