csssecrets · January 26, 2015 12:09
diff --git a/dabblet.css b/dabblet.css
 /**
 * Diamond images — via clip-path
 */

 img {
 	max-width: 250px;
 	margin: 20px;
 	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 	transition: 1s;
 }

 img:hover {
 	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
diff --git a/dabblet.html b/dabblet.html
 <img src="http://csssecrets.io/images/adamcatlace.jpg" />
 <img src="http://csssecrets.io/images/adam-sleeping.jpg" />
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	<img src="http://csssecrets.io/images/adamcatlace.jpg" />
	<img src="http://csssecrets.io/images/adam-sleeping.jpg" />
No results found