Efeitos CSS Efeitos Imagens Vanessa S.
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.
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)
<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.
Gostava de achar um script que deixasse as imagens em branco e preto e quando passasse o mouse encima ela ficasse colorida…
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.
Obrigado meu blog estava bom agora esta perfeito !
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!
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
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…
Me ajudou muito.
Muito obrigado, gostei muito do seu blog!
Sucessos! 😀
Rafael
Tem sim. Veja o tópico 2.
Tem como eu colocar isso, aonde fica as imagens dos parceiros e etc ?
Eu estava procurando por esse efeito… Muito Obrigada Clau!
Otimo tutorial, faz tempo que eu estava procurando esse efeito pra por no meu blog
eu não consigo, visto que quando procuro por: ".post img {
padding:4px;
border:1px solid $bordercolor;
}" não encontro nada…
100assunto.com
Fico feliz que tenha gostado e mais feliz ainda pelo comentário e pelo retorno. Obrigada!
Obrigado Clau, esse efeito deu uma aparência bem melhor para o menu do meu novo template, que estou desenvolvendo ainda =D
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.
muitissimo bom … obrigado pela dica 😉
Exatamente como eu tava procurando.
Mas vc não tem um, que ao invés de deixar as imagens claras, que elas fiquem escuras?
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 ;*
Legal
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
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.
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
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. 😉
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
Funcionou sim!
Muito obrigada! <3
~*Mari*~
Ao inves de aplicar o efeito em:
.post img{
Substitua por:
.post-body img{
faz o teste e veja se dá certo.
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
Lucas
É o efeito Shadowbox. Procure no índice o link para o tutorial dele.
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? *__*
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.
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
Obrigado, funcionou blz aqui, continuem asim.
até mais.
@Blog da Mecânica:
No IEca8 funciona sim…rs
Obrigada pelo comentário e volte sempre!
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?
@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?
Eu testei no meu blogdeteste e deu certo,obrigado sempre gostei desse efeito rolover nas imagens.
Abraço!
Po vocês são feras!
Eu pedi este tutoriail, até pensei que seria esquecido!
Obrigado mesmo!
não funcionou! em nenhuma imagem do post!
@Cafe do Livro:
Dá uma lida neste post e veja se te ajuda.
Obrigada pela visita e pelo comentário..volte sempre!
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
Amei este tutorial.
Há muito tempo eu queria saber como se faz pra deixar este efeito nos icones rsrs
Abraços o/