Efectos Simples Botones e Imágenes

-Cambiar la opacidad:

  <style type="text/css"> .opacidad:hover{ opacity:0.8; } </style>

  -Girar:

<style type="text/css"> .giro:hover{ -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); rotation: 25deg; border:none; } </style>

-Escalar:

<style type="text/css"> .escalar:hover{ -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9) } </style>

-Pasar de blanco y negro a color:

<style type="text/css"> .escaladegris{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: Gray(); } .escaladegris:hover{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: Gray(); } </style>

-Pasar de sepia a color:

<style type="text/css"> .sepia{ -webkit-filter: sepia(1); -moz-filter: sepia(1); -ms-filter: sepia(1); -o-filter: sepia(1); filter: sepia(1); } .sepia:hover{ -webkit-filter: sepia(0); -moz-filter: sepia(0); -ms-filter: sepia(0); -o-filter: sepia(0); filter: sepia(0); }</style>

-Aumentar brillo:

<style type="text/css"> .brillo:hover{ -webkit-filter: brightness(1.5); -moz-filter: brightness(1.5); -ms-filter: brightness(1.5); -o-filter: brightness(1.5); filter: brightness(1.5); } </style>

-Desenfocar:

<style type="text/css"> .desenfocar:hover{ -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); } </style>