CSS

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-6.css">

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="grayscale"><a href="#"><img src="img/06.jpg" alt=""></a></div>

CSSの書き方

/*　モノクロからカラーへ　*/

.grayscale img{
	filter: grayscale(100%);/*モノクロ具合を変更したい場合はこの数値を変更*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.grayscale a:hover img{/*hoverした時の変化*/
	filter:grayscale(0);
}