<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);
}
This Pen doesn't use any external CSS resources.