hover with animation

dabblet.css

/**
 * hover with animation
 */

article{
  width: 150px; height: 150px;
  background: #ede;
  display: block
  margin: 150px;
  overflow:hidden;
  position: relative;
  }
img{
  position: absolute;
  zoom: 200%;
  width: 150px
}
img{ 

  transition: all .30s;
  }
h1{
  transition: all .80s;
  }
    
article:hover img{
-webkit-filter: hue-rotate(50deg);
   zoom: -1; zoom: 100%;  }

h1{ position: absolute;
display: block;
margin:110%  26% 0  26%;
}
article:hover h1{
  margin-top: 30%;
}

dabblet.html

<article>
<img src="http://dc397.4shared.com/img/77kpLlf3/homer-doh-square.jpg">
<h1>this is</h1>
</article>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}