Snippi

1.
```
.gallery dl dt img{
```
2.
```
	-webkit-filter: grayscale(100%);
```
3.
```
	-moz-filter: grayscale(100%);
```
4.
```
	-ms-filter: grayscale(100%);
```
5.
```
	-o-filter: grayscale(100%);
```
6.
```
	filter: grayscale(100%);
```
7.
```
	filter: gray; /* IE 6-9 */
```
8.
```
	-webkit-transition: all ease 1s;
```
9.
```
	   -moz-transition: all ease 1s;
```
10.
```
	    -ms-transition: all ease 1s;
```
11.
```
	     -o-transition: all ease 1s;
```
12.
```
	        transition: all ease 1s;
```
13.
```
}
```
14.
```
 
```
15.
```
.gallery dl dt img.color{
```
16.
```
	-webkit-filter: grayscale(0%);
```
17.
```
	-moz-filter: grayscale(0%);
```
18.
```
	-ms-filter: grayscale(0%);
```
19.
```
	-o-filter: grayscale(0%);
```
20.
```
	filter: grayscale(0%);
```
21.
```
	filter: none; /* IE 6-9 */
```
22.
```
	-webkit-transition: all ease 1s;
```
23.
```
	   -moz-transition: all ease 1s;
```
24.
```
	    -ms-transition: all ease 1s;
```
25.
```
	     -o-transition: all ease 1s;
```
26.
```
	        transition: all ease 1s;
```
27.
```
}
```

.gallery dl dt 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 */ -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; transition: all ease 1s; } .gallery dl dt img.color{ -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: none; /* IE 6-9 */ -webkit-transition: all ease 1s; -moz-transition: all ease 1s; -ms-transition: all ease 1s; -o-transition: all ease 1s; transition: all ease 1s; }

Copy Code to Clipboard Raw

Color/grayscale + animate CSS

Sign-in or Create a Free Account.