CSS-only image masks
As you might already know, Webkit has introduced support for css image masks. That didn’t come off as a real surprise, considering the stuff they’ve been up to recently.
I’ve been meaning to try and do a css-only image mask, but to no avail. It seems that the easiest way to do it does not work in Firefox: adding an :after pseudo-element to an image tag. Why? Because the :after pseudo-class generates a non-parsable html element that will be inserted as the last child of the element, in our case, the image tag. Which doesn’t really like children.
My second choice was floats, by the way.
.mask{
height:117px;
width:114px;
float:left;
margin-left:-114px;
}
.img{
float:left;
}
<img class=”img” src=”http://gosnip.net/rabbit.jpg” />
<img class=”mask” src=”http://gosnip.net/mask.gif” />
Here’s a nitty-gritty example. You can use the URL’s if you want to get the images. They work. But careful, mask.gif is totally transparent. Just right-click somewhere in the top left corner to save it.