Question

I want to change the appearance of text using a mask on mouse hover. I thought image-mask would be the right way to do this but I can not get it to work. My goal is to have images inside of text.

HTML:

<div id="BEN">BEN</div>

​
CSS:

#ben {
    font-family: 'Arial';
    font-size: 72px;
    color: rgba(0,0,0,1);
    float: right;
    line-height:90px;
    font-weight:bold;

}
#ben:hover {
-webkit-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-o-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
-moz-mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
mask-image:url(https://dl.dropbox.com/u/16640285/mask.jpg);
}​

http://jsfiddle.net/tKE6N/3/

Answer 1

Per your Question Title and more importantly your comment of expecting the image inside of the text letters, you need to use CSS3 background-clip to accomplish this, not mask-image.

Here’s a webkit tutorial to point you in the right direction.

Play with it (Chrome or Safari) with this jsFiddle.

---

For background-clip values, Firefox does not support text but supports border-box, padding-box, and content-box. For this reason the demo will not work in Firefox v13.0.1 but v14 is expected to have this functionality.

Workaround is to use SVG method as illustrated HERE.