23.1.15

2 tutoriais para efeitos de clarear e escurecer as imagens das suas postagens

sakura | Tumblr

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!

10 comentários:

  1. 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?

    ResponderExcluir
  2. De nada :)

    Apaga 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 :)

    ResponderExcluir
    Respostas
    1. 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 =/ .

      Excluir
    2. Sério? No meu deu tudo certinho :/
      Se você quiser eu coloco pra você, deixe seu email aqui pra mim, depois eu apago seu comentário ;)

      Excluir
    3. Não tudo bem ficou mais bonito assim =) Obrigada <3

      Excluir
    4. Ah então está bem :)
      de nada lindona <3

      Excluir
  3. Muito bom o tutorial! depois vou fazer no meu blog.

    ~Beijoos

    ResponderExcluir

- Se tive alguma dica, diga! =)
- Alguma dúvida ou algum pedido? Comente!
- Sim, visito o seu blog, mande o link! =D
-Favor não ofender ninguém, elogios e criticas são bem vindos, mas mantem o respeito!
Obrigada, MB!

Copyright © 2016 | Design e Código: Mistério do Brilho e Sanyt Design | Tema: Viagem - Blogger | Uso pessoal • voltar ao topo