Efecto de invertir los colores a una imagen con CSS3

Entre otros efectos que hemos visto están; efecto en escala de grises, efecto Sepia en una imagen y el efecto saturado en una imagen, hoy veremos cómo agregar el efecto de “Invert” a una imagen.

Invert

Este filtro lo que hace es invertir los colores de una imagen, dependiendo del porcentaje veras el efecto, en este ejemplo le pondremos invert(100%).

-webkit-filter: invert(100%); /* Chrome - Safari */
-moz-filter: invert(100%); /* Firefox */
-ms-filter: invert(100%); /* IE9 */
-o-filter: invert(100%); /* Opera */

El ejemplo lo realizaremos con esta imagen http://www.mundonets.com/images/paisaje-rural-hd.jpg

Le agregamos el estilo: style=" -webkit-filter : invert(100%);-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); "

El código de la imagen quedaría asi:

<img src="http://www.mundonets.com/images/paisaje-rural-hd.jpg" style="width : 400px; -webkit-filter : invert(100%);-moz-filter: invert(100%); -ms-filter: invert(100%); -o-filter: invert(100%); ">

Esta es la imagen original:



Este es el resultado con el efecto: