Make your gallery fade to colour with only SVG and CSS

Make your gallery fade to colour with only SVG and CSS

fadetocolor

Working on that awesome interior design website using the Genesis framework decided that it needs a bit of spicing up in the gallery section in order to separate it from the big images usually being posted above it. So decided to make those gallery images black and white and show their colour on hover.

Here’s how to do it only with CSS and using an SVG:

img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'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>#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray; /* IE 6-9 */
}

img:hover {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
-webkit-transition: 1s;
transition: 1s;
}

That’s it, you have super awesome galleries now 🙂

Leave a Reply

Close Menu

×
×

Cart