Efeito "blu" em hover nas imagens

by - setembro 06, 2013


Yoo minna-san >.<
Estou fazendo um novo lay para o GQCA, devido a isso, ainda não postei hoje.
Então trouxe um post do blog que tinha feito; eu queria trazer esse efeito
para vocês também!
Criei o efeito ele usando 
combinações de "saturate". O nome do efeito é ironicamente "blu", que veio de
blue que é azul em inglês, poque a imagem fica azul ao passar o mouse.
Visualize: (x)

Para usar esse efeito é bem simples: 

Cole o seguinte código acima antes de ]]></b:skin>:

.blu:hover{
-webkit-filter: sepia(1) hue-rotate(164deg) saturate(3);
-moz-filter: sepia(1) hue-rotate(164deg) saturate(3);
-ms-filter: sepia(1) hue-rotate(164deg) saturate(3);
-o-filter: sepia(1) hue-rotate(164deg) saturate(3);
filter: sepia(1) hue-rotate(164deg) saturate(3);}
.spineffect{
-webkit-transition-duration: 1.20s;
}

E adicione ao código da imagem onde quer usar o efeito, o seguinte: class="blu". Deve ficar assim:

<img src="url" class="blu"/>
 Feito isso, o efeito já será utilizado*.*
Espero que gostem <3~~Chu

Share
Tweet
Pin
Share
Tags :

You May Also Like

12 Comentários

  1. Aysawa Lucy-6 de setembro de 2013 às 13:59

    Usui e Misa <33,amo eles xDD
    Adorei o efeito ^-^
    Kissus >33<
    Otakada Kawaii

    ResponderExcluir
  2. Y6 de setembro de 2013 às 15:29

    Como ja avia disto ele e lindooooooooo um efeito perfeito
    To tão feliz pela sua volta o GQCA e o primeiro blog que conheci de animes e se não fosse aki sei la não gosto de pensa como seria triste
    Haaaaaaa o layout ta perfeito
    Como voce colocou a musica poderia me ensinar e que eu queria colocar
    Bjossssssssssss

    ResponderExcluir
    Respostas
    1. Gaby Misaki7 de setembro de 2013 às 05:01

      Hihi, que bom que gostou^^
      Anwww muito obrigada^^
      ok, vou fazer tuto^^

      ~~Kissus

      Excluir
  3. Aoki Kaai6 de setembro de 2013 às 16:14

    Vim pedir um tutorial:

    Lembras-te daquela vez que eu te pedi como se fazia mais/menos ? Desta vez eu queria pedir-te para fazer como no ultimo gadget do Otaku Doki Doki

    otakudokidoki.blogspot.pt

    Kissus :3

    ResponderExcluir
    Respostas
    1. Gaby Misaki7 de setembro de 2013 às 05:02

      Bem, eu sei fazer esse menu, mas já tem tutos dele em vários blogs.
      Aqui está um tutorial dele: http://chacomanjos.blogspot.com.br/2013/08/menu-de-abas.html

      ~~kiss *3*

      Excluir
    2. Aoki Kaai7 de setembro de 2013 às 05:22

      arigatou ^^ vai me dar muuito jeito!

      Kissus :3

      Excluir
  4. Unknown7 de setembro de 2013 às 04:52

    Gaby-chan T.T Já estava com sdds, entro todo dia no Blog e vc quase não aparece T.T
    P.s: Quando tento fazer, na hora de procurar o código, não acho! :c Sempre estou a procura de tuto e quando tento fazer, que pede para procurar tal código, aperto F3 ai colo o código e aparece 0 de 0 seeempre, oq faço? T.T

    ResponderExcluir
    Respostas
    1. Unknown7 de setembro de 2013 às 04:52

      P.S2: Amei o novo visu do blog *-*

      Excluir
    2. Gaby Misaki7 de setembro de 2013 às 05:04

      Obrigada Mio-chan^^
      Olha, visita essa postagem pode te ajudar:
      http://reinokawaii.blogspot.com.br/2013/04/novo-editor-de-html-do-blogger.html

      ~~Kissus

      Excluir
    3. Unknown7 de setembro de 2013 às 05:40

      Arigato-gozaimasu ><

      Excluir
  5. Letícia7 de setembro de 2013 às 15:43

    Adorei o efeito!

    vidadeumasone.blogspot.com

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀｀*) (*≧∀≦*) (=´∀｀)人(´∀｀=) ( ･ ▽ ･)
ヾ(*^▽^*)o, ｡･ﾟﾟ･(>_<)･ﾟﾟ･｡ (＞ω＜；)＊(´∀`)ﾉﾉ＊
（。ゝω・）～♡ ﾍ(´∀｀ﾍ)ﾍ (╯°□°）╯•ᴥ• (´･ω･`)