<div class="instamask">
  <img src="http://phlearn.com/wp-content/uploads/2012/08/Amelia_Cinemagraph.gif" />
</div>


<svg>
  <!-- THE mask -->
  <mask id="mask" maskContentUnits="objectBoundingBox">
    <!-- using an img, but this img is black/transparent so we filter it to make it white -->
    <image xlink:href="http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png" width="1" height="1" preserveAspectRatio="none" filter="url(#filter)"/>
  </mask>
  
  <!-- the filter to make the image white -->
  <filter id="filter">
    <feFlood flood-color="white" />
    <feComposite in2="SourceAlpha" operator="in" />
  </filter>
</svg>

html{
  width:100%;
  height:100%;
  background-image: linear-gradient(#8b9da9, #fff6e4);
  box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
}
.instamask {
  margin: 20px auto;
  text-align: center;
}
.instamask img {
  width: 50%;
  height: auto;
}

.instamask img {
  -webkit-mask: url('http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png');
  mask: url('#mask');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  transition: -webkit-mask-size .3s;
}

.instamask img:hover {
  -webkit-mask-size: calc(100% / 5) calc(100% / 3);
}