How To Create A CSS Hidden Images With Filter Effects

{tocify} $title={Table of Contents}

This tutorial will answer the problem, how can I create a hidden image then after the mouse cursor point to the image, the image will appear. For those of you who want to get a settlement, directly read the simple tutorial below.

This technique only play on css filter function to hide and show image when mouse cursor point to the image. Which is usually used to create a navigation menu. Ok, let's begin to make the css script. Copy the following script in a file where you put all your website css code.

img {
 filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE5+ */
 -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
 }
img:hover {
 filter: none;
 -webkit-filter: grayscale(0);
}

In the first group is the function code to make the image be hidden, and the second group deactive download it functions code-first group, so the image will appear on your browser screen.

For HTML setting, you do not need to enter any code calling the script again simply enter the picture.
For example :

<img src="Image URL" />

Hopefully this simple tutorial can be useful for you