How to place an image inside the text using CSS3?


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.


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

​ CSS:

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

#ben:hover {

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.