aurelkurtula
3/14/2013 - 11:12 PM

hover effect

hover effect

settings.json
content_copyfile_download
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
dabblet.js
content_copyfile_download
// alert('Hello world!');
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->

<div id="container">

<a href=""></a>

</div>
dabblet.css
content_copyfile_download
/**
 * hover effect
 http://www.diesel.com/campaign/#/
 */
body{
background: gray;
}

#container{
	width: 300px; 
	height: 200px;
	background: blue;
	overflow: hidden;
	content: " Hover" ; 
}

a{ opacity: 1; 
-webkit-transform-origin: 0% 0%; 

 background-color: rgb(236, 116, 96); 
 width: 100px; 
 height: 347px;
 display:block;
 margin: -15px 0 0 300px;
}

#container:hover a{
-webkit-transform: rotate(13deg) ;
}