<h1>Applying a CSS mask</h1>
<div class="instamask">
  <img src="http://lorempixel.com/200/200/city/9" alt="" />
  <span>+</span> 
  <img src="http://iamvdo.me/conf/2012/kiwiparty/img/masque2.png" alt="" />
  <span>=</span>
  <img src="http://lorempixel.com/250/250/city/9" alt="" />
</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>
.instamask {
  margin: 20px auto;
  text-align: center;
}
.instamask img {
  width: 200px;
  height: 200px;
}
.instamask > * {
  display: inline-block;
  margin: 10px;
  vertical-align: middle;
  font-size: 2em;
}
.instamask img:last-of-type {
  -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% / 3) calc(100% / 3);
}



html {
  text-align: center;
  min-height: 100%;
  background: linear-gradient(white, #ddd);
}
h1, p {
  margin-top: 50px;
  color: rgba(0,0,0,.3);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js