Image Filter

CSS

							CopyCopied!
							
.container {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	        justify-content: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	        flex-wrap: wrap;
}
img {
	-webkit-filter: grayscale(100%);
	        filter: grayscale(100%);
	cursor: pointer;
	transition: box-shadow 0.25s ease-out 0s,
				-webkit-filter 0.25s ease-out 0.15s;
	transition: box-shadow 0.25s ease-out 0s,
				filter 0.25s ease-out 0.15s;
	transition: box-shadow 0.25s ease-out 0s,
				filter 0.25s ease-out 0.15s,
				-webkit-filter 0.25s ease-out 0.15s;
	border-radius: 3px;
	-webkit-flex: 0 1 auto;
	    -ms-flex: 0 1 auto;
	        flex: 0 1 auto;
	margin: 0.5em;
}
img:hover {
	-webkit-filter: none;
	        filter: none;
	box-shadow: -1px 1px 10px #000;
}