If you are using an image for a link, and are looking for an interesting way to make your user experience different, I have an idea for you. Have your image be black and white until someone hovers over it. Does that mean you need to load two different images? Is there complex code attached to this wizardry? Nope. Just a bit of CSS and the addition of the class, and you’re off to the races. Check it out.

.grayscale img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
.grayscale img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
}

Add this CSS to your styles. Then be sure to add greyscale as a class on the image you wish to use. Good luck!

Photo by BENJAMIN CREMER on Unsplash