<filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter>
2° Agora, vamos pro segundo passo, procurem por ]] e cole esse código abaixo, acima de ]] :
img:hover {-webkit-transition-duration: .50s;filter: url(filters.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}
img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);}
Bordas arredondadas! :3
Pronto, depois dessas duas etapas, sua imagem estará no efeito preto & branco, mais iaí, quer deixar mais lindjo ainda? Que tal bordas arredondadas? então vamos lá!
Procure por ]] e em cima dessa tag, cole esse código:
img:hover {- border-radius: 10px 10px 10px 10px;-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px; -webkit-transition-duration: .50s;filter: url(filters.svg#grayscale);filter: gray;-webkit-filter: grayscale(1);}
img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);}
img {-webkit-transition-duration: .50s; opacity:0.99;-moz-opacity: 0.99;filter: alpha(opacity=99);}
créditos da Kawaii the world
Nenhum comentário:
Postar um comentário