dziudek · June 13, 2012 13:50
diff --git a/dabblet.css b/dabblet.css
 /**
 * Image :hover effect
 */

 figure {
 	background: #eee;
 	border: 3px solid #aaa;
 	display: block;
 	float:left;
 	overflow: hidden;
 	perspective: 600;	
 }

 figure:before {
 	background: #f00;
 	content: "";
 	display: block;
 	width: 0px;
 	height: 0px;
 	border: 20px solid #aaa;
 	border-top:20px solid #eee;
 	border-right: none;
 	border-bottom: 20px solid #eee;
 	position: absolute;
 	top: 50%;
 	left: 20%;
 	margin-top: -20px;
 	transition: all 0.3s ease-out;
 }

 figure:hover:before {
 	left: 80%;
 }

 figure img {
 	display: block;
 	position: relative;
 	left: 0;
 	top: 0;
 	transition: all 0.3s ease-out;
 }

 figure:hover img {
 	left: -10%;
 	transform: scale(0.75) rotate3d(0, 1, 0, 45deg);
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->

 <figure id="toggle">
 	<img src="http://placekitten.com/300/200" />
 </figure>
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	<!-- content to be placed inside <body>…</body> -->

	<figure id="toggle">
	<img src="http://placekitten.com/300/200" />
	</figure>