 |
| Foto | ♪ ♫ ♪ |
Olá galerinha geek! 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!!
Own eu pedi e tu fez um post pra explicar <3 obg
ResponderExcluirDe nada, Duda! Espero que tenha dado certo. ^-^
ExcluirHey, 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?
ResponderExcluirOlá Thais! Fico muito feliz em saber que você está amando o Lírio Escarlate. <3
ExcluirPara 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
Precisa publicar pra ver o efeito?
ResponderExcluirSe não, aqui não tá prestando :c
Como coloca esses efeitos no avatar/imagens do jornal? ;-;
ResponderExcluir