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/>