Uma leitora mandou sua dúvida em um comentário sobre como colocar esse efeito de clarear e escurecer as imagens do post, e hoje eu trouxe dois tutoriais com efeitos inversos, mas é super simples e fácil de vocês fazerem, vamos aprender e ver como fazer esse feito fofo *--* vamos lá aprender?
Esse aqui vai deixar sua imagem normal, mas quando passar o mouse a imagem vai clarear.
Primeiro vá em MODELO >> Editar HTML >> depois aperte Ctrl + F, e procure por <head> e ABAIXO cole esse código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("img").fadeTo("fast", 1)
$("img").hover(
function () {
$(this).fadeTo("fast", 0.6);
},
function () {
$(this).fadeTo("fast", 1);
}
);
})
</script>
Esse aqui a imagem fica clara o tempo todo, mas quando passa o mouse a imagem fica normal.
ATENÇÃO: MUITO CUIDADO COM ESSE CÓDIGO, NÃO COPIE DENTRO DA CHAVE { } PORQUE PODE MODIFICAR MUITA COISA DO SEU BLOG (igual aconteceu comigo, mas conseguir refazer o código). PRESTE BASTANTE ATENÇÃO, FIZ UM PRINT E ACOMPANHE ELE DO JEITO QUE FIZ. (se tiver dificuldade de ver, clique na imagem para ampliar)
Observe que depois de none; } onde já fechou a chave } e antes de a:visited { que é onde já começa a abrir a outra chave {. Pois então, faça de acordo com a imagem.
Primeiro vá em MODELO >> Editar HTML >> depois aperte Ctrl + F, e procure por body { você vai entrar vário talvez, mas use a imagem de print de cima como base, e procure o body igual ou parecido com aquele, e então ABAIXO cole esse código finalizando com a chave }:
.post img{opacity:1;
-moz-opacity: 1;
filter: alpha(opacity=100);}
.post a:hover img{opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);}
Fica lindo no blog né? Pois é! Deixe nos comentários suas dúvidas, dicas, se conseguiu ou não, deixem o que quiser. Irei responder como sempre!
Beijos :*
SE FOR COPIAR FAVOR DEIXAR OS CRÉDITOS. PLÁGIO É CRIME!
Oii Obrigada por atender meu pedido! Mais no meu Layout ta acontecendo o seguinte: Eu queria que a foto ficasse clara e passa-se o mouse fica-se da cor normal mais eu testei os dois e ta acontecendo o contrário, eu passo o mouse e fica claro, fiz algo de errado?
ResponderExcluirDe nada :)
ResponderExcluirApaga o primeiro que é o da imagem normal e depois passa o mouse e fica clara... e faça apenas o último tutorial, eu testei os dois e funcionaram muito bem no meu. Se você fizer os dois tutoriais e salvar, vai ficar os dois efeitos.
Se não conseguir deixa seu email aqui que eu te ajudo melhor com isso, beijoos lindona :)
Sim eu fiz isso, eu testei um e depois o outro mais não deu certo. A Diferença de um e outro no meu Layout e que o primeiro passa o mouse em cima e fica claro e quando tira sai um pouco devagar, e no outro a mesma coisa so que quando sai mais rapido =/ .
ExcluirSério? No meu deu tudo certinho :/
ExcluirSe você quiser eu coloco pra você, deixe seu email aqui pra mim, depois eu apago seu comentário ;)
Não tudo bem ficou mais bonito assim =) Obrigada <3
ExcluirAh então está bem :)
Excluirde nada lindona <3
Muito bom o tutorial! depois vou fazer no meu blog.
ResponderExcluir~Beijoos
Valeeu gata *-----*
Excluirme ajudou baastante *-*
ResponderExcluirQue bom flor :)
Excluir