26.12.14

[Social Spirit] Efeito hover nas imagens: P&B para Colorido

Foto | ♪ ♫ 

Olá Lírios! Como estão?

Trago hoje um tutorial que me pediram. É um efeito onde deixa as fotos em preto e branco e volta a ficar colorido quando passa o mouse por cima. Aqui vou ensinar a colocar no Menu Direito, mas vocês podem usar em outros lugares do Style também.

Vamos começar?

Procure pela área onde editamos o Menu Direito (/* Estilos do Menu Direito do Site /*), copie o código abaixo e cole nessa mesma área.





Salve as alterações e veja se está tudo em ordem.

É só isso. :) Fácil, né?

Créditos a Nick Tutoriais pelos códigos do tutorial - eu editei os códigos, para que pudesse mudar de P&B para colorido. Se quiser fazer ao contrário, ou até mesmo não deixar totalmente em preto e branco, é só editar a opção saturate (altere os números entre 0% e 100% para obter o resultado do seu grado).

Até mais!!

6 comentários:

  1. Own eu pedi e tu fez um post pra explicar <3 obg

    ResponderExcluir
    Respostas
    1. De nada, Duda! Espero que tenha dado certo. ^-^

      Excluir
  2. Hey, achei o blog hoje e estou amanda <333 vc tem um efeito oposto? sabe que é colorido e fica preto e branco (com detalhes de uma cor só, se der) quando passa o mouse em cima?

    ResponderExcluir
    Respostas
    1. Olá Thais! Fico muito feliz em saber que você está amando o Lírio Escarlate. <3

      Para obter o efeito oposto é só mudar a porcentagem da saturação. Ficaria desse jeito:

      .boxMenuDireito img {
      -webkit-filter: saturate(100%) ;
      -webkit-transition-duration: .90s;
      }

      .boxMenuDireito img:hover {
      -webkit-filter: saturate(0%);
      -webkit-transition-duration: .90s;
      }

      De uma cor só eu não sei como faz, desculpe :( Mas acredito que só dê para fazer esse efeito usando imagens editadas.

      Obrigada pela visita e volte sempre <3

      Excluir
  3. Precisa publicar pra ver o efeito?
    Se não, aqui não tá prestando :c

    ResponderExcluir
  4. Como coloca esses efeitos no avatar/imagens do jornal? ;-;

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...