이미지 마우스온오버 액션

html/css

img{opacity: 0.7;
       -webkit-transition: all 0.3s linear 0s;
          -moz-transition: all 0.3s linear 0s;
            -o-transition: all 0.3s linear 0s;
               transition: all 0.3s linear 0s;}
 img:hover{opacity: 1.0;
       -webkit-transition: all 0.3s linear 0s;
          -moz-transition: all 0.3s linear 0s;
            -o-transition: all 0.3s linear 0s;
               transition: all 0.3s linear 0s;}
             
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"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}             
             
//


{CustomCSS}

img{opacity: 1.0;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;}
img:hover{opacity: 1.0;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;}        

//

/* 이미지 흑백에서 컬러 */

img:hover {

  -webkit-filter: grayscale(0%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(0%);

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(0%);

  -o-transition: .5s ease-in-out;

} 

img {

  -webkit-filter: grayscale(100%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(100%); 

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(100%); 

  -o-transition: .5s ease-in-out;

}