franklinjavier/dabblet.css

## dabblet.css


#shaded {
    filter: grayscale(1);
    transition: filter ease-in 0.3s;
}

#shaded:hover {
    filter: grayscale(0);
}

## dabblet.html


<html>
<head>
    ...
<style>

</style>
</head>

<body>
    <div id="shaded">
        <div id="multi-col">
            <h2>The Creative Web</h2>

            <p>Lorem ipsum dolor ... </p>
            <img id="png-img" src="planes.jpg"/>

            <p>Mauris at ... </p>
            <img id="svg-img" src="picture.svg" />

            <p>Morbi congue ....</p>
            <img id="css3-img" src="html5_css3_styling.svg" />

        </div>
    </div>
</body>
</html>

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}


	#shaded {
	filter: grayscale(1);
	transition: filter ease-in 0.3s;
	}

	#shaded:hover {
	filter: grayscale(0);
	}


	<html>
	<head>
	...
	<style>

	</style>
	</head>

	<body>
	<div id="shaded">
	<div id="multi-col">
	<h2>The Creative Web</h2>

	<p>Lorem ipsum dolor ... </p>
	<img id="png-img" src="planes.jpg"/>

	<p>Mauris at ... </p>
	<img id="svg-img" src="picture.svg" />

	<p>Morbi congue ....</p>
	<img id="css3-img" src="html5_css3_styling.svg" />

	</div>
	</div>
	</body>
	</html>