rlmark/DtGib.markdown

## DtGib.markdown

      
    Raw
  

              DtGib.markdown
            
          
    DtGib

A Pen by Rebecca on CodePen.
License.

  
## index.html

<body>
  <img  src="http://antiworldnews.files.wordpress.com/2012/06/globalforumonoceans_oceanleadership-org_.jpg" alt="Nettuts+ Logo">


</body>


## style.css
body {
  text-align:center; }

img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;

  -webkit-filter: grayscale(100%);
}

img:hover{
  -webkit-filter: grayscale(0%)
}

/*@-webkit-keyframes adjustSat {
}*/

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");

	<body>
	<img src="http://antiworldnews.files.wordpress.com/2012/06/globalforumonoceans_oceanleadership-org_.jpg" alt="Nettuts+ Logo">


	</body>
	body {
	text-align:center; }

	img {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;

	-webkit-filter: grayscale(100%);
	}

	img:hover{
	-webkit-filter: grayscale(0%)
	}

	/*@-webkit-keyframes adjustSat {
	}*/

	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");