Black and white image on hover css. CSS image filters

CSS3 filters are a very interesting offshoot of SVG, allowing you to modify HTML elements and images by applying blur, brightness, and more. In this tutorial, we'll take a quick look at exactly how they work.

How it works?

Using just CSS we can create some pretty complex effects. They can be applied to both images and HTML elements. The property that is used to control all of these effects is filter.

filter: filter(value) ;

As you might expect, this property requires the use of a browser prefix. But for now, only -webkit-(Chrome and Safari) is the only browser engine that supports this property.

Webkit-filter: filter(value) ;
-moz-filter: filter(value) ;
-o-filter: filter(value) ;
-ms-filter: filter(value) ;

Filtration

There are a number of filters, so to get a better idea of ​​each of them, let's take a look at them one by one. Multiple filters can be applied to the same element (separated by space), e.g. brightness And blur:

filter: blur(5px ) brightness(0.5 ) ;

There are a few filters that won't be covered below, but they can be easily implemented with pre-existing CSS (transparency and shadows). Here's the original image we'll be using to demonstrate how the filters work:

I will show the photo with the filter applied (first photo) and the result of the filter as a static image (second photo) if you are using a browser that does not support filters and cannot see the result.

Blur

Always wanted to make a Gaussian blur for an image or text with just one CSS? With filters you can do it! Blur is measured in pixels, so you can do something like this:

filter: blur(5px ) ;
// Browser Specific
-webkit-filter: blur(5px ) ;
-moz-filter: blur(5px ) ;
-o-filter: blur(5px ) ;
-ms-filter: blur(5px) ;

Brightness

Brightness is measured from zero to one, 1 is full brightness (white) and 0 is initial brightness.

filter: brightness(0.2 ) ;
// Browser Specific
-webkit-filter: brightness(0.2 ) ;
-moz-filter: brightness(0.2 ) ;
-o-filter: brightness(0.2 ) ;
-ms-filter: brightness(0.2 ) ;

Saturation

Saturation is measured as a percentage.

filter: saturate(50% ) ;
// Browser Specific
-webkit-filter: saturate(50% ) ;
-moz-filter: saturate(50% ) ;
-o-filter: saturate(50% ) ;
-ms-filter: saturate(50% ) ;

Tone rotation

This filter allows you to change the tone by turning it (think of a color wheel that you then turn). It is measured in degrees.

filter: hue-rotate(20deg) ;
// Browser Specific
-webkit-filter: hue-rotate(20deg) ;
-moz-filter: hue-rotate(20deg) ;
-o-filter: hue-rotate(20deg) ;
-ms-filter: hue-rotate(20deg) ;

Contrast

Contrast, again, is measured as a percentage. 100% is the default, 0% will produce a completely black image. Anything over 100% adds contrast!

filter: contrast(150% ) ;
// Browser Specific
-webkit-filter: contrast(150% ) ;
-moz-filter: contrast(150% ) ;
-o-filter: contrast(150% ) ;
-ms-filter: contrast(150% ) ;

Inversion

Also measured as a percentage. Available values ​​are from 0% to 100%. Oddly enough, at the moment, webkit doesn't support inversions that are less than 100%.

filter: invert(100% ) ;
// Browser Specific
-webkit-filter: invert(100% ) ;
-moz-filter: invert (100% ) ;
-o-filter: invert (100% ) ;
-ms-filter: invert (100% ) ;

Bleaching

Again, specify the percentage by which you want to desaturate the image. Available values ​​are from 0% to 100%.

filter: grayscale(100% ) ;
// Browser Specific
-webkit-filter: grayscale(100% ) ;
-moz-filter: grayscale(100% ) ;
-o-filter: grayscale(100% ) ;
-ms-filter: grayscale(100% ) ;

Sepia

I suppose this is very useful if you want to post something on Instagram. Though I also assume you won't be using CSS for this. Anyway, these grayscales and negatives, in sum, will allow you to add sepia to the image. 100% is the completed sepia, 0% is the original image.

filter: sepia(100% ) ;
// Browser Specific
-webkit-filter: sepia(100% ) ;
-moz-filter: sepia(100% ) ;
-o-filter: sepia(100% ) ;
-ms-filter: sepia(100% ) ;

Browser Support

	Webkit	Mozilla	Trident	Presto
Blur	experimental	Not	Not	Not
Brightness
Saturation
Tone rotation
Contrast
Inversion	Only full inversion
Bleaching	experimental
Sepia

If you have any questions, please use our

The easiest way to desaturate a color image is with CSS. Typically, the filter is applied to a class, as it's not uncommon to create the same effect on multiple images:

100 % ) ; }

Setting an image class is also easy:

Adding an SVG filter

The CSS shown above works in all modern browsers, both desktop and mobile, including the Microsoft Edge browser.

To achieve the same effect in Firefox prior to version 35, you will need to use an SVG filter, which we will create in a separate file called desaturate.svg. This file will contain the following code:

"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> < /svg>

If the SVG code above looks a little intimidating and the array is too complex, don't worry. This is one of the code snippets that we advise you to simply copy and paste as a standard recipe for creating a black and white image.

Along with this SVG file, next to the HTML page and the desired image, the CSS code will be supplemented with this line:

Img.desaturate( filter: grayscale( 100 % ) ; filter: url (desaturate .svg #greyscale) ; }

Adding Internet Explorer Browser Support

For the effect to work in Internet Explorer versions 6 to 9, we apply a simple Microsoft proprietary filter:

Img.desaturate ( filter: gray ; filter: grayscale( 100 % ) ; filter: url (desaturate .svg #greyscale) ; }

If you need to add support for legacy browsers on the Webkit engine, extend the code like this:

Img.desaturate ( -webkit-filter: grayscale(1 ) ; -webkit-filter: grayscale( 100 % ) ; filter: gray filter: grayscale( 100 % ) ; filter: url (desaturate .svg #greyscale) ; }

This method does not work in Internet Explorer 10 and 11 versions. If you want to create the same visual effect in absolutely all browsers, you can use a Javascript solution for different browsers or, for example, the Greyscale.js script.

The CSS above allows us to visually convert an image to black and white in the browser on the fly, without having to save new versions in Photoshop. CSS code also makes it much easier to change the image: for example, if we reduce the percentage in the values ​​of the filter property from 100% to 50%, then we will get a mixture of the desaturation effect and the original color image.

A slightly easier approach for older versions of the Firefox browser is to include the SVG code directly in the CSS code without having to add anything to a separate file and tag :

Img.desaturate( -webkit-filter: grayscale( 100 % ) ; filter: grayscale( 100 % ) ; filter: gray filter: url ( "data:image/svg+xml;utf8, #greyscale") ; }

Translation - Desk

Hello. Today you will not surprise anyone with beautiful effects on websites. Some have been doing it in Flash for the last 10 years, others haven't stopped doing it in Javascript yet, but the most advanced ones have been using CSS3 for a long time. That's what we're going to do today.

Let's learn how to desaturate a CSS image (Grayscale image css), and do it beautifully

So, let's start simple, we need beautiful photos, let's take this:

We need to desaturate it (desaturate CSS image - remove colors, make image black and white). For this (and indeed for working with graphics) in CSS3 there is a special filter tool.

Here we will apply it.

Solution: Desaturate the CSS Image

Let's draw the picture first:

Then we write a style for the image:

Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filter: gray; /* IE 6-9 */ )

Now our picture will be black and white.

You can, of course, stop there, but it’s much more interesting when the picture also responds to user actions.

I propose to make it so that when you hover over the image, it smoothly becomes colored.

In fact, it is not at all difficult to do this, and it is not at all necessary to know Javascript.

Animate desaturate image CSS

Let's add a little to our previous style:

Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filter: gray; /* IE 6-9 */ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter : none; filter: none; /* IE 6-9 */ )

This will allow the image to become colored when hovering over it with the mouse. We'll also use a CSS3 transition to make the fading process animate:

Img ( -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale( 100%); filter: gray; /* IE 6-9 */ /*Add code like this*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition : all 1s; /*end code with transition*/ ) img:hover ( -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter : none; /* IE 6-9 */ )

The all parameter in the transition says that the rule will work for all styles, and the second parameter is the animation time.
In the first parameter, you can specify a specific property (for example, height, to animate only the height), and in the second, the time in seconds (you can use decimal fractions - 0.1s).

CSS properties have reached such a level of development that they are able to cope with some important functions of image editors. An example of this is CSS filters, which can be used to create beautiful effects for images.

If earlier it was difficult to even imagine it, now almost all software filters are implemented in the cascading table, from blurring to artistic color models.

However, CSS filters have one small drawback - not all web browsers support visual effects. Of course, it's only a matter of time. And by the time the “x” hour arrives, developers need to be ready. In the meantime, consider what has already been implemented at the moment.

Browser Support for CSS Filters

Basically, all popular browsers, Firefox, Chrome, Opera, have a "friendly" relationship with filter effects. What can not be said about IE, which completely refuses to support effects, even in the latest versions.

Browser	explorer	Chrome	Firefox	safari	Opera	Android	iOS
Version	no	31+	35+	7+	18+	4.4+	6+
filter	—	(-webkit-)	+	(-webkit-)	(-webkit-)	(-webkit-)	(-webkit-)

Functions and Syntax of CSS Filters

All CSS properties have some parameters that combine the order in which values ​​are written. The filter property is no exception, like the others, it can use a combination of multiple rules in a single application. For example, add a brightness filter for the image, and specify another one through the space - contrast. We will cover everything in this article with a few examples for better understanding.

Syntax

Filter: filter name (value percentage) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Apply multiple filters */ filter: contrast(150%) grayscale (80%);

List of filters

Filter	Description
blur(px)	Filter to blur the image. The amount of blur is specified in pixels. If no number is given, the default is 0.
drop shadow()	Shadow. An alternative to the box-shadow property with similar parameters and the same spelling order. The exception is the fourth value "stretch": almost all browsers do not support it.
gray scale (%)	Desaturate filter. Applies shades of gray to the image based on the specified percentage. A negative value is not allowed, and the originality of the picture is 0.
brightness (%)	Adjust the brightness of the image. A value of 100% shows the original brightness point. Adjustment is made both negatively (-50%) and positively (150%).
contrast (%)	Adjust the image contrast. As with the previous filter, a value of 100% will show the origin point. Changes can be set negative (-20%) and positive (120%).
hue-rotate (deg)	Rotary color tone overlay. Depending on the specified degree (from 0deg to 360deg), the color will be adjusted to the image, which is determined by the color wheel.
invert (%)	Image inversion. A value between 0 and 100% is applied with no negative parameter.
saturation (%)	Image saturation. The home position is defined as 100% and has no negative value.
sepia (%)	Sepia effect. The originality of the picture is defined as 0% and is available up to 100% without negation.
opacity (%)	Image transparency. Another filter that has a similar opacity property with the same uses. The setting is allowed from 0 to 100% without a negative parameter.
url()	CSS link to an SVG element with a specific #id.
initial	Sets the default value of a property.
inherit	Inherits all property values ​​of its parent element.

CSS filters examples

We have come to the interesting part of the article, in which we will consider each filter separately with examples of its application. For clarity, three pictures will be used. The first will show the starting point, the appearance of originality. The second will serve as a static example in applying the filter, and the third will show the hover effect, hovering the mouse over the image.

blur filter

In graphic editors, the blur filter is an indispensable tool and is often used in work. It is able to not only create a blurry image, but to make the effect of focusing on a certain element, while the rest of the image falls under the blur. And much more.

In the design of the site (for example - blur) can be used as a lining for better readability of the text located in the picture. Actually, the blur is performed in a Gaussian manner from the value of 0 px and until it disappears completely.

Original

Filter

hover effect

/*static rule*/ .efbl1 img( filter: blur(2px); -webkit-filter: blur(2px); ) /*for hover effect*/ .efbl2 img( transition: all 0.6s ease 0s; ) . efbl2:hover img( filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; )

shadow filter

The shadow property came to us with the third version of the cascading table. Of course, it is familiar to everyone involved in website building, since box-shadow plays an important role in design. The drop-shadow filter can be called an inferior alternative with similar parameters, and there are only 5 of them, not counting the inner shadow.

The order of writing is: 5px/-5px (horizontal offset), 5px/-5px (vertical offset), 15px (shadow blur radius), 5px/-5px (shadow stretch), black (color). The filter supports all syntax except stretching and inset value (inner shadow), as well as adding multiple shadows separated by commas. But despite all this, there are advantages, for example, the filter takes into account pseudo-elements, which allows you to display the exact shape of the element's shadow.

Also interesting is that when the box has no background, but only a border stroke, then when using box-shadow, a shadow will be displayed supposedly taking into account the background, that is, solid. And in the case of using drop-shadow, the shadow takes the form of a stroke without regard to the background.

Original

Filter

hover effect

/*static rule*/ .efdrswd1 img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0 , 0.4)); ) /*for the hover effect*/ .efdrswd2 img( transition: all 0.6s ease 0s; ) .efdrswd2:hover img( filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; )

Decolorization filter

Classic photography style for all time in the right direction. The filter allows only one value - positive. Depending on the specified percentage, grayscale will smoothly replace the color of the image. Also, instead of percentages, you can use a fraction up to a whole number (0.01/1).

Original

Filter

hover effect

/*static rule*/ .efgrays1 img( filter: grayscale(90%); -webkit-filter: grayscale(90%); ) /*for hover effect*/ .efgrays2 img( transition: all 0.6s ease 0s; ) .efgrays2:hover img( filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; )

Brightness filter

Adding light to the "unexplored" black corners of the image. It is often used in photo processing, since amateur shots, as a rule, are taken in poorly lit places. The brightness of the filter is adjustable from 0% (completely black picture) to almost complete disappearance of the image. The original point is defined as 100%, and the value can also be specified as a fraction.

Original

Filter

hover effect

/*static rule*/ .efbrig1 img( filter: brightness(150%); -webkit-filter: brightness(150%); ) /*for hover effect*/ .efbrig2 img( transition: all 0.6s ease 0s; ) .efbrig2:hover img( filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; )

Contrast filter

A simple way to make an image more expressive is to experiment with the brightness settings of the lightest and darkest parts of the picture. The contrast filter is here to help. Its parameters, like many others, exclude a negative value (-150%), and the initial position is indicated at 100%. In addition to percentages, a fraction (1.5) is also allowed.

Original

Filter

hover effect

/*static rule*/ .efcontr1 img( filter: contrast(150%); -webkit-filter: contrast(150%); ) /*for hover effect*/ .efcontr2 img( transition: all 0.6s ease 0s; ) .efcontr2:hover img( filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; )

Color tone filter

An excellent design technique in the design of the image, under the style of the main design of the resource. The bottom line is to overlay the shade of the selected color on the original image. The ratios come out depending on the specified degree, which indicates the color point on the color wheel.

If the value is positive (150deg), then the rotation is clockwise. Accordingly, if negative, then counterclockwise. In two positions it starts from 0deg to 360deg.

Original

Filter

hover effect

/*static rule*/ .efhrotai1 img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); ) /*for hover effect*/ .efhrotai2 img( transition: all 0.6s ease 0s; ) .efhrotai2:hover img( filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; )

Filter inversion

A specific effect that allows you to turn the color of an image upside down. In graphic editors, it has a certain role and it happens that without its participation it is not possible to achieve the desired result. The invert filter parameter is indicated only in the positive direction from the value of 0% to 100%.

Original

Filter

hover effect

/*static rule*/ .efinve1 img( filter: invert(100%); -webkit-filter: invert(100%); ) /*for hover effect*/ .efinve2 img( transition: all 0.6s ease 0s; ) .efinve2:hover img( filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; )

Saturation filter

When an image loses its natural color for unknown reasons (something like a faded T-shirt in the sun), then increasing the saturation can instantly restore the previous look. And if this filter is used in combination with other filters, the result will be very satisfactory. Adjustment is made from 0 initial form, to large numbers.

Original

Filter

hover effect

/*static rule*/ .efsatut1 img( filter: saturate(165%); -webkit-filter: saturate(165%); ) /*for hover effect*/ .efsatut2 img( transition: all 0.6s ease 0s; ) .efsatut2:hover img( filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; )

Sepia filter

Imitation of the effect of old photographs (slightly brown tint). In this way, a retro image style is achieved, which is especially popular. The sepia filter is adjustable from 0% (home position) to 100%.

Original

Filter

hover effect

/*static rule*/ .efsepiaa1 img( filter: sepia(100%); -webkit-filter: sepia(100%); ) /*for hover effect*/ .efsepiaa2 img( transition: all 0.6s ease 0s; ) .efsepiaa2:hover img( filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; )

Filter transparency

The filter is similar to the opacity property from the 3rd version cascading table. The syntax is the same, but the transparency value is adjustable from 0% to 100% (original position).

Original

Filter

hover effect

/*static rule*/ .efopaty1 img( filter: opacity(50%); -webkit-filter: opacity(50%); ) /*for hover effect*/ .efopaty2 img( transition: all 0.6s ease 0s; ) .efopaty2:hover img( filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; )

Link filter

A custom filter is created based on SVG elements with a specific ID, which can then be used in CSS via a link filter. Effects can be very different from standard filters, ranging from mask-overlay to banal transparency.

CSS filters generator

It has long been customary to create generators of various CSS properties. , and many many others. They serve as a tool that simplifies the work. And for novice webmasters, they can be of double benefit. They are very easy to use: move the sliders, and the result is immediately visible. And at the end, it remains only to copy the generated code. The same goes for CSS filter generators. Here are two of them for your reference:

Conclusion

The review turned out to be quite rather big, but I hope that it will be useful to someone in practice. Also don't forget to combine filters, one is good, but two will be better in certain cases.

CSS3 filters render visual effects similar to Photoshop filters in the browser. Filters can be added not only to images, but also to any non-empty elements.

The set of filters is not limited to those preinstalled in the browser. You can also use SVG filters by downloading them from the link along with the svg element.

Filters were originally created as part of the SVG specification. Their task was to apply effects based on the pixel grid to vector graphics. With browser support for SVG, it became possible to use these effects directly in browsers.

Browsers process the page pixel by pixel applying the specified effects and render the result on top of the original. Thus, by applying several filters, you can achieve different effects, as if they are superimposed on each other. The more filters, the longer it takes the browser to render the page.

You can apply multiple filters at the same time. The classic way to apply these effects is when hovering over a :hover element.

Browser Support

IE: do not support
edge: 13.0 except url()
Firefox: 35.0
Chrome: 18.0 -webkit-
safari: 9.1, 6.0 -webkit-
opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

filter
blur()	The value is specified in units of length, such as px , em . Applies a Gaussian blur to the original image. The larger the radius value, the greater the blur. If no radius value is specified, it defaults to 0 .
brightness()	The value is specified in % or in decimal fractions. Changes the brightness of the image. The larger the value, the brighter the image. The default value is 1 .
contrast()	The value is specified in % or in decimal fractions. Adjusts the image contrast, i.e. difference between the darkest and lightest areas of the image/background. The default value is 100% . A value of zero will hide the original image under a dark gray background. Values ​​increasing from 0 to 100% or 0 to 1 will gradually open the original image to the original display, and values ​​above will increase the contrast between light and dark areas.
drop shadow()	The filter acts like the box-shadow and text-shadow properties. Uses the following values: x-offset y-offset blur stretch shadow color. A distinctive feature of the filter is that the shadow is added to the elements and its content, taking into account their transparency, i.e. if the element contains text inside, then the filter will add a shadow for both the text and the visible borders of the block. Unlike other filters, this filter requires parameters to be specified (the minimum is the offset value).
greyscale()	Extracts all the colors from the picture, making the output black and white. The value is specified in % or decimal fractions. The larger the value, the stronger the effect.
hue-rotate()	Changes the colors of the image depending on the specified rotation angle in the color wheel. The value is given in degrees from 0deg to 360deg . 0deg is the default value, meaning no effect.
invert()	The filter makes the image negative. The value is given in %. 0% applies no filter, 100% fully converts colors.
opacity()	The filter works similarly to the opacity property, adding transparency to an element. A distinctive feature is that browsers provide hardware acceleration for the filter, which improves performance. An added bonus is that the filter can be combined with other filters at the same time, creating interesting effects. The value is only given in % , 0% makes the element completely transparent, and 100% has no effect.
saturate()	Controls the saturation of colors, working like a contrast filter. A value of 0% removes the color, and 100% has no effect. Values ​​from 0% to 100% decrease color saturation, while values ​​above 100% increase color saturation. The value can be given as a % or as an integer, 1 is equivalent to 100% .
sepia()	An effect that imitates antiquity and "retro". A value of 0% does not change the appearance of the element, while 100% reproduces the full sepia effect.
url()	The function accepts the location of an external XML file with an svg filter, or an anchor to a filter that is in the current document.
none	Default value. Means no effect.
initial	Sets this property to its default value.
inherit	Inherits the property value from the parent element.