Tutorial: efecto link 3D


>_<

Tutorial: Mensaje en la pestaña


owo

Tutorial: Efecto opacidad en imágenes #2

Plantilla | Editar HTML | CTRL+F y buscas:
]]></b:skin>
Y arriba de ]]></b:skin> pegas: 
 img {
border: 1px solid #efefef;
padding: 10px;
background-color:#ffffff;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
}

img:hover {
opacity:0.6;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;

-Amary-

Tutorial: Efecto Img Rainbow 2 {faster}

Para cualquiera de los dos: Arriba de ]]></b:skin>

El que acaba en blanco y negro
img {
filter: none;
-webkit-filter: none;
-moz-filter: none;
-webkit-filter;(0);
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;}
img:hover {
filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-webkit-filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-moz-filter: brightness(0.7) contrast(5) grayscale(1) hue-rotate(360deg) invert(0.1) saturate(7);
-webkit-filter;(1);
-webkit-transition: all 0.7s ease-in;
-moz-transition: all 0.7s ease-in;
transition: all 0.7s ease-in;
}

Faster {normal}
img:hover {
-webkit-filter: hue-rotate(1000deg) ;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
img {
-webkit-filter: hue-rotate(0deg) ;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}