Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508668343
Vida do cache: 1508711543
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos CSS Efeitos Imagens

Efeito Opacity – Transparência na Imagem

A propriedade Opacity, permite que você aplique um efeito de transparência em uma imagem quando passamos o mouse em cima dela.
Você pode aplicar este efeito de diferentes maneiras:

1) Aplicar em todas e quaisquer imagens publicadas nas postagens – para este efeito é necessário aplicar o estilo da propriedade opacity no CSS do seu template, para que o efeito seja reconhecido e se aplique automaticamente.

2) Aplicar apenas em determinadas imagens – cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.

Imagem 1:
Imagem 2:

 

1. Aplicando transparência à todas as imagens nos posts:

Este efeito é igual ao aplicado no Template Goth Red Black, onde o efeito se aplica à todas as imagens publicadas nas postagem. Note que a aplicação deste efeito é feita de forma automática. A imagem se apresenta opaca, e quando passamos o mouse em cima ela fica mais forte(imagem 1).

No menu “modelo”, vá em “Editar HTML” , não precisa clicar em “Expandir modelos de widgets”, e procure por:

.post img {
padding:4px;
border:1px solid $bordercolor;
}

E SUBSTITUA tudo por:

.post img {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}
.post img:hover {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}

Caso queira aplicar o efeito da imagem 2:

SUBSTITUA por:


.post img {
filter: alpha(opacity:1); 
KHTMLOpacity: 1; 
MozOpacity: 1; 
-khtml-opacity:.1; 
-ms-filter:"alpha(opacity=100)"; 
-moz-opacity:1; 
filter:alpha(opacity=100); 
opacity:1;
}
.post img:hover {
filter: alpha(opacity:0.5); 
KHTMLOpacity: 0.5; 
MozOpacity: 0.5; 
-khtml-opacity:.50; 
-ms-filter:"alpha(opacity=50)"; 
-moz-opacity:.50; 
filter:alpha(opacity=50); 
opacity:.50;
}

2. Aplicando transparência apenas em determinadas imagens:

Cada vez que quiser adicionar transparência em alguma imagem é necessário que você aplique as propriedades a cada imagem, separadamente.


Imagem Linkada – (passe o mouse)

Para aplicar este efeito, utilize este código:


<a href="LINK-AQUI">
<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;" src="ENDEREÇO-DA-IMAGEM" /></a>

 

Use sua criatividade, aplicando este efeito em icones, imagens, botões etc.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

41 Comentários

  1. Isaias disse:

    Gostava de achar um script que deixasse as imagens em branco e preto e quando passasse o mouse encima ela ficasse colorida…

  2. Não era o efeito que eu estava procurando. Tem um outro que dá um zoom, muito utilizado para destacar banners de blogs parceiros. Eu não sei como se chama exatamente esse efeito, e passei horas procurando…E não achei! Mas esse efeito também é muito bom, e vou usa-lo.
    Obrigado!

    Quero até oferecer uma sugestão. Que tal um e-book com os códigos mais importantes para melhorar o visual de um blog?! Eu compraria um e-book do gênero e seria muito útil para todos.

  3. Obrigado meu blog estava bom agora esta perfeito !

  4. Bernardo disse:

    Oi moça! Primeiro, parabéns pelo blog, sem ele eu seria mais amador do que já sou! Nunca comento, mas estou sempre por aqui. Olha só, eu apliquei este efeito em imagens no meu blog, e deu certo no navegador Chrome. Entretanto, no Internet Explorer 8 o recurso não funciona. As imagens aparecem, os links funcionam, parece tudo normal. Mas quando tu passas o mouse por cima da imagem, não surge o efeito e aparece uma mensagem de erro na barra de status do IE, embora tudo continue funcionando, menos o efeito. É isso mesmo, nesse navegador não rola? Ou tem algo que possa melhorar isso? Mais uma vez, parabéns pelo trabalho e obrigado pela atenção!

    • Vanessa disse:

      Infelizmente o IEca sempre é O problema. Recomendo que atualize-o para o IEca 9, ele é, digamos que, “menos pior” que as versões mais antigas..rs

  5. Jhone disse:

    Muito bom o tutorial, mas não consigo fazer com que funcione o efeito “fade” sl… eu coloco ele apenas da o efeito hover mas não da aquele efeito alpha…

  6. Victor Pádua disse:

    Me ajudou muito.
    Muito obrigado, gostei muito do seu blog!
    Sucessos! 😀

  7. .:: Clau ::. disse:

    Rafael
    Tem sim. Veja o tópico 2.

  8. Rafael Matos disse:

    Tem como eu colocar isso, aonde fica as imagens dos parceiros e etc ?

  9. The Blogger Better disse:

    Eu estava procurando por esse efeito… Muito Obrigada Clau!

  10. Daniel disse:

    Otimo tutorial, faz tempo que eu estava procurando esse efeito pra por no meu blog

  11. Cárina Félix disse:

    eu não consigo, visto que quando procuro por: ".post img {
    padding:4px;
    border:1px solid $bordercolor;
    }" não encontro nada…

  12. .:: Clau ::. disse:

    100assunto.com
    Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!

  13. 100assunto.com disse:

    Obrigado Clau, esse efeito deu uma aparência bem melhor para o menu do meu novo template, que estou desenvolvendo ainda =D

  14. .:: Clau ::. disse:

    rafa
    Dá uma lida no tutorial "aplicar estilos a página inicial", talvez te ajude.

    Alisson
    Não tenho.

    Anjo
    eu quem agradeço pelo retorno 😉
    valeu.

  15. Anjo disse:

    muitissimo bom … obrigado pela dica 😉

  16. Alisson disse:

    Exatamente como eu tava procurando.
    Mas vc não tem um, que ao invés de deixar as imagens claras, que elas fiquem escuras?

  17. rafa disse:

    Eu nunca comento em NENHUM blog. Mas essa postagem salvou a aparencia do meu blog ! Sempre visito seu blog, está de parabéns ! Uma coisa que eu não achei aqui e ficaria muito grato se fazer um post explicando como separar as postagens pois todas ficam "grudadas" beijos ;*

  18. Flávio de Olive!!! disse:

    Legal

  19. caliandradocerradogo disse:

    Obrigada pela atenção.
    Na verdade, esse efeito eu quero usar num outro blog que tenho para adultos que tem o fundo black.
    Gosto muito de vir aqui e tenho aprendido com suas dicas que são ótimas.
    Bjão

  20. .:: Clau ::. disse:

    caliandradocerradogo
    Nossa, desculpa, tem razão, o erro foi meu, eu falei "Quanto maior for a numeração que vc colocar mais opaca a imagem fica", mas na verdade é ao contrário mesmo: quanto Menor for o valor mais opaco fica.

  21. caliandradocerradogo disse:

    Obrigada Clau
    Eu adicionei a transparência em algumas imagens apenas, mas, só consegui aumentar a opacidade diminuindo os valores. Não entendi bem o porque.
    Mas a imagem ficou opaca como eu quero.
    Fico muito grata e desejo um ótimo final de semana.
    Bjooo

  22. .:: Clau ::. disse:

    caliandradocerradogo
    Tem sim. É só vc aumentar o valor da opacidade, por exemplo, em todas as partes do código que tiver 0.5 ou 50, aumente este valor.
    Quanto maior for a numeração que vc colocar mais opaca a imagem fica. 😉

  23. caliandradocerradogo disse:

    Bom dia Clau
    Gostaria de saber se tem como aumentar o grau de opacidade das imagens.
    Gostaria que ficassem mais apagadas, tem como?
    Se for possível gostaria muito fazer isso.
    No aguardo, já agradeço sua atenção.
    Bj

  24. ~*Mari*~ disse:

    Funcionou sim!
    Muito obrigada! <3

  25. .:: Clau ::. disse:

    ~*Mari*~
    Ao inves de aplicar o efeito em:
    .post img{
    Substitua por:
    .post-body img{
    faz o teste e veja se dá certo.

  26. ~*Mari*~ disse:

    Tem como colocar esse efeito, porém sem que ele afete as imagens dos autores que aparecem no título do post?
    Eu tenho um blog de grupo, mas o efeito acabou aparecendo também nos avatares dos autores, e não consegui descobrir como tirar D:

    Alias, valeu por todas as dicas e tutoriais do blog!
    É o meu blog favorito de ocisas sobre o blogger! Valeu mesmo <3

  27. .:: Clau ::. disse:

    Lucas
    É o efeito Shadowbox. Procure no índice o link para o tutorial dele.

  28. Lucas disse:

    Clau,quando visito sua galeria de imagens no universo sombrio,quando clikamos nas imagens,aparece uma pequena janela,como se fosse um reprodutor,tem esse tutorial? *__*

  29. ::Clau:: disse:

    Santiago Régis:
    Não sei te dizer, pq nunca testei. É questão de vc testar, ou dar uma pesquisada para ver se é possivel ou não.

  30. Santiago Régis disse:

    Clau,
    é possivel mudar a cor da opacidade?
    por exemplo, do cinza para um azul?

    ahhhhhh eu ouvi vc no blogcast muito bom te conhecer =D

  31. Janzao disse:

    Obrigado, funcionou blz aqui, continuem asim.
    até mais.

  32. ::Clau:: disse:

    @Blog da Mecânica:
    No IEca8 funciona sim…rs
    Obrigada pelo comentário e volte sempre!

  33. Blog da Mecânica disse:

    Muito legal esse efeito..

    Ja havia visto em alguns tutoriais na internet mas nenhum tão detalhado assim.

    Tem como usar isso no IEca ou esse navegador horrivel nao possibilita isse rescurso também?

    abraço?

  34. ::Clau:: disse:

    @Bk:
    Eu nunca esqueço um pedido feito por um leitor, se demora um pouco pra ser atendido é só pela escassez de tempo mesmo…Valeu pela sugestão de artigo…=)

    @Avelino:
    Fico feliz que tenha dado certo. Obrigada pelo comentário e continue sempre aqui viu?

  35. Avelino disse:

    Eu testei no meu blogdeteste e deu certo,obrigado sempre gostei desse efeito rolover nas imagens.
    Abraço!

  36. Junior Macedo disse:

    Po vocês são feras!
    Eu pedi este tutoriail, até pensei que seria esquecido!
    Obrigado mesmo!

  37. ?·?•?þ?uL??ho??•???- Adm disse:

    não funcionou! em nenhuma imagem do post!

  38. ::Clau:: disse:

    @Cafe do Livro:
    Dá uma lida neste post e veja se te ajuda.
    Obrigada pela visita e pelo comentário..volte sempre!

  39. CAFFE DO LIVRO disse:

    Amiga Linda Grata por sua boa vontade e principalmente pela suas dicas ,imensamente didaticas.
    Posso tirar uma duvida quanto a transparencia rainha?
    Veja bem amada eu coloquei um efeito opacidade de uma dica de um outro blog,no meu blockquote e não funcionou.
    E ainda deletou o efeito blockquote,mas ai então eu quiz colocar esse efeito apenas em um texto,da sidebar a direita de um dos meus blogs…
    Mas gostaria que as letras ficassem visiveis!
    No entando eu coloco o efeito e as letras somem!
    Você poderia explicar em uma dica ou tuto melhor sobre isso rainha?
    Beijos

  40. AnneKira™ disse:

    Amei este tutorial.
    Há muito tempo eu queria saber como se faz pra deixar este efeito nos icones rsrs

    Abraços o/

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.