Como colocar Hover nas imagens do Blog

Olá blogueiros !

Hoje trago a vocês um tutorial de como colocar hover nas imagens do blog quando passar o mouse.E algumas opções de hover.Espero que gostem ! *-* :




1° Vá em Design , Personalizar , Clique em Avançado , Adicionar CSS , e cole um dos seguintes código de sua escolha :

• Sépia :

.main img {-webkit-filter: sepia(0%); -moz-filter: sepia(0%); -ms-filter: sepia(0%); -o-filter: sepia(0%);filter: sepia(0%);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: sepia(100%); -moz-filter: sepia(100%); -ms-filter: sepia(100%); -o-filter: sepia(100%);filter: sepia(100%);-webkit-transition-duration: .70s;}

• Saturate :

.main img {-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: saturate(100%); -moz-filter: saturate(100%); -ms-filter: saturate(100%); -o-filter: saturate(100%);filter: saturate(100%);-webkit-transition-duration: .70s;}

• Preto e Branco :

.main img {-webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);filter: grayscale(0%);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);-webkit-transition-duration: .70s;}

• Blur ( embaçado) :

.main img {-webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px);filter: blur(0px);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px);filter: blur(5px);-webkit-transition-duration: .70s;}

• Hue :

.main img {-webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -ms-filter: hue-rotate(0deg); -o-filter: hue-rotate(0deg);filter: hue-rotate(0deg);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: hue-rotate(28deg); -moz-filter: hue-rotate(28deg); -ms-filter: hue-rotate(28deg); -o-filter: hue-rotate(28deg);filter: hue-rotate(28deg);-webkit-transition-duration: .70s;}

• Negativo :

.main img {-webkit-filter: invert(0%); -moz-filter: invert(0%); -ms-filter: invert(0%); -o-filter: invert(0%);filter: invert(0%);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%);filter: invert(100%);-webkit-transition-duration: .70s;}

• Contrast :

.main img {-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: contrast(150%); -moz-filter: contrast(150%); -ms-filter: contrast(150%); -o-filter: contrast(150%);filter: contrast(150%);-webkit-transition-duration: .70s;}

• BrightNess :

.main img {-webkit-filter: brightness(0.0); -moz-filter: brightness(0.0); -ms-filter: brightness(0.0); -o-filter: brightness(0.0);filter: brightness(0.0);-webkit-transition-duration: .70s;}.main img:hover {-webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); -ms-filter: brightness(0.5); -o-filter: brightness(0.5);filter: brightness(0.5);-webkit-transition-duration: .70s;}

Aplique ao blog , e veja como ficou ! *.*

Espero que tenham ajudado vocês ! até ao próximo tuto ! *.*