How to place an image inside Text using CSS3?

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: ```

BEN

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

Accepted Answer

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.

How to place an image inside Text using CSS3?

Solution

Problem