CSS Text Fader

<figure>
  <!-- Trigger for fader text -->
  <img id="ten" src="images/dollars.png" alt="$10" title="$10" width="388" height="214"/>
</figure>

<div id="fader">
  <h3>This is the text that you want to fade in</h3>
  <div class="mask"><img src="images/mask.png" /></div>
</div>

mask.png

8950 4e47 0d0a 1a0a 0000 000d 4948 4452
0000 0384 0000 0028 0806 0000 00a6 7834
3300 0000 0970 4859 7300 000b 1300 000b
1301 009a 9c18 0000 0a4f 6943 4350 5068
6f74 6f73 686f 7020 4943 4320 7072 6f66
696c 6500 0078 da9d 5367 5453 e916 3df7
def4 424b 8880 944b 6f52 1508 2052 428b
8014 9126 2a21 0910 4a88 21a1 d915 51c1
1145 4504 1bc8 a088 038e 8e80 8c15 512c
0c8a 0ad8 07e4 21a2 8e83 a388 8aca fbe1
7ba3 6bd6 bcf7 e6cd feb5 d73e e7ac f39d
b3cf 07c0 080c 9648 3351 3580 0ca9 421e
11e0 83c7 c4c6 e1e4 2e40 810a 2470 0010
08b3 6421 73fd 2301 00f8 7e3c 3c2b 22c0
07be 0001 78d3 0b08 00c0 4d9b c030 1c87
ff0f ea42 995c 0180 8401 c074 9138 4b08
8014 0040 7a8e 42a6 0040 4601 809d 9826
5300 a004 0060 cb63 62e3 0050 2d00 6027
7fe6 d300 809d f899 7b01 005b 9421 1501
a091 0020 1365 8844 0068 3b00 accf 568a
4500 5830 0014 664b c439 00d8 2d00 3049
5766 4800 b0b7 00c0 ce10 0bb2 0008 0c00
3051 8885 2900 047b 0060 c823 2378 0084
9900 1446 f257 3cf1 2bae 10e7 2a00 0078
99b2 3cb9 2439 4581 5b08 2d71 0757 572e
1e28 ce49 172b 1436 6102 619a 402e c279
9919 3281 340f e0f3 cc00 00a0 9115 11e0
83f3 fd78 ce0e aece ce36 8eb6 0e5f 2dea
bf06 ff22 6262 e3fe e5cf ab70 4000 00e1
747e d1fe 2c2f b31a 803b 0680 6dfe a225
ee04 685e 0ba0 75f7 8b66 b20f 40b5 00a0
e9da 57f3 70f8 7e3c 3c45 a190 b9d9 d9e5
e4e4 d84a c442 5b61 ca57 7dfe 67c2 5fc0
57fd 6cf9 7e3c fcf7 f5e0 bee2 2481 325d
8147 04f8 e0c2 ccf4 4ca5 1ccf 9209 8462
dce6 8f47 fcb7 0bff fc1d d322 c449 62b9
582a 14e3 5112 718e 449a 8cf3 32a5 2289
4292 29c5 25d2 ff64 e2df 2cfb 033e df35
00b0 6a3e 017b 912d a85d 6303 f64b 2710
5874 c0e2 f700 00f2 bb6f c1d4 2808 0380
6883 e1cf 77ff ef3f fd47 a025 0080 6649
9271 0000 5e44 242e 54ca b33f c708 0000
44a0 812a b041 1bf4 c118 2cc0 061c c105
dcc1 0bfc 6036 8442 24c4 c242 1042 0a64
801c 7260 29ac 8242 2886 cdb0 1d2a 602f
d440 1d34 c051 6886 9370 0e2e c255 b80e
3d70 0ffa 6108 9ec1 28bc 8109 0441 c808
1361 21da 8801 628a 5823 8e08 1799 85f8
21c1 4804 128b 2420 c988 1451 224b 9135
4831 528a 5420 5548 1df2 3d72 0239 875c
46ba 913b c800 3282 fc86 bc47 3194 81b2
513d d40c b543 b9a8 371a 8446 a20b d064
7431 9a8f 16a0 9bd0 72b4 1a3d 8c36 a1e7
d0ab 680f da8f 3e43 c730 c0e8 1807 33c4
6c30 2ec6 c342 b138 2c09 9363 cbb1 22ac
0cab c61a b056 ac03 bb89 f563 cfb1 7704
1281 45c0 0936 0477 4220 611e 4148 584c
584e d848 a820 1c24 3411 da09 3709 0384
51c2 2722 93a8 4bb4 26ba 11f9 c418 6232
3187 5848 2c23 d612 8f13 2f10 7b88 43c4
3724 1289 4332 27b9 9002 49b1 a454 d212
d246 d26e 5223 e92c a99b 3448 1a23 93c9
da64 6bb2 0739 942c 202b c885 e49d e4c3
e433 e41b e421 f25b 0a9d 6240 71a4 f853
e228 52ca 6a4a 19e5 10e5 34e5 0665 9832
4155 a39a 52dd a8a1 5411 358f 5a42 ada1
b652 af51 87a8 1334 759a 39cd 8316 494b
a5ad a295 d31a 6817 68f7 69af e874 ba11
dd95 1e4e 97d0 57d2 cbe9 47e8 97e8 03f4
770c 0d86 1583 c788 6728 199b 1807 1867
1977 18af 984c a619 d38b 19c7 5430 3731
eb98 e799 0f99 6f55 582a b62a 7c15 91ca
0a95 4a95 2695 1b2a 2f54 a9aa a6aa deaa
0b55 f355 cb54 8fa9 5e53 7dae 4655 3353
e3a9 09d4 96ab 55aa 9d50 eb53 1b53 67a9
3ba8 87aa 67a8 6f54 3fa4 7e59 fd89 0659
c34c c34f 43a4 51a0 b15f e3bc c620 0b63
19b3 782c 216b 0dab 8675 8135 c426 b1cd
d97c 762a bb98 fd1d bb8b 3daa a9a1 3943
334a 3357 b352 f394 663f 07e3 9871 f89c
744e 09e7 28a7 97f3 7e8a de14 ef29 e229
1ba6 344c b931 655c 6baa 9697 9658 ab48
ab51 ab47 ebbd 36ae eda7 9da6 bd45 bb59
fb81 0e41 c74a 275c 2747 678f ce05 9de7
53d9 53dd a70a a716 4d3d 3af5 ae2e aa6b
a51b a1bb 4477 bf6e a7ee 989e be5e 809e
4c6f a7de 79bd e7fa 1c7d 2ffd 54fd 6dfa
a7f5 470c 5806 b30c 2406 db0c ce18 3cc5
3571 6f3c 1d2f c7db f151 435d c340 43a5
6195 6197 e184 91b9 d13c a3d5 468d 460f
8c69 c65c e324 e36d c66d c6a3 2606 2621
264b 4dea 4dee 9a52 4db9 a629 a63b 4c3b
4cc7 cdcc cda2 cdd6 9935 9b3d 31d7 32e7
9be7 9bd7 9bdf b760 5a78 5a2c b6a8 b6b8
6549 b2e4 5aa6 59ee b6bc 6e85 5a39 59a5
5855 5a5d b346 ad9d ad25 d6bb adbb a711
a7b9 4e93 4eab 9ed6 67c3 b0f1 b6c9 b6a9
b719 b0e5 d806 dbae b66d b67d 6167 6217
67b7 c5ae c3ee 93bd 937d ba7d 8dfd 3d07
0d87 d90e ab1d 5a1d 7e73 b472 143a 563a
de9a ce9c ee3f 7dc5 f496 e92f 6758 cf10
cfd8 33e3 b613 cb29 c469 9d53 9bd3 4767
1767 b973 83f3 888b 894b 82cb 2e97 3e2e
9b1b c6dd c8bd e44a 74f5 715d e17a d2f5
9d9b b39b c2ed a8db afee 36ee 69ee 87dc
9fcc 349f 299e 5933 73d0 c3c8 43e0 51e5
d13f 0b9f 9530 6bdf ac7e 4f43 4f81 67b5
e723 2f63 2f91 57ad d7b0 b7a5 77aa f761
ef17 3ef6 3e72 9fe3 3ee3 3c37 de32 de59
5fcc 37c0 b7c8 b7cb 4fc3 6f9e 5f85 df43
7f23 ff64 ff7a ffd1 00a7 8025 0167 0389
8141 815b 02fb f87a 7c21 bf8e 3f3a db65
f6b2 d9ed 418c a0b9 4115 418f 82ad 82e5
c1ad 2168 c8ec 90ad 21f7 e798 ce91 ce69
0e85 507e e8d6 d007 61e6 618b c37e 0c27
8587 8557 863f 8e70 8858 1ad1 3197 3577
d1dc 4373 df44 fa44 9644 de9b 6731 4f39
af2d 4a35 2a3e aa2e 6a3c da37 ba34 ba3f
c62e 6659 ccd5 589d 5849 6c4b 1c39 2e2a
ae36 6e6c bedf fced f387 e29d e20b e37b
1798 2fc8 5d70 79a1 cec2 f485 a716 a92e
122c 3a96 404c 884e 3894 f041 102a a816
8c25 f213 7725 8e0a 79c2 1dc2 6722 2fd1
36d1 88d8 435c 2a1e 4ef2 482a 4d7a 92ec
91bc 3579 24c5 33a5 2ce5 b984 27a9 90bc
4c0d 4cdd 9b3a 9e16 9a76 206d 323d 3abd
3183 9291 9071 42aa 214d 93b6 67ea 67e6
6676 cbac 6585 b2fe c56e 8bb7 2f1e 9507
c96b b390 ac05 592d 0ab6 42a6 e854 5a28
d72a 07b2 6765 5766 bfcd 89ca 3996 ab9e
2bcd edcc b3ca db90 379c ef9f ffed 12c2
12e1 92b6 a586 4b57 2d1d 58e6 bdac 6a39
b23c 7179 db0a e315 052b 8656 06ac 3cb8
8ab6 2a6d d54f abed 5797 ae7e bd26 7a4d
6b81 5ec1 ca82 c1b5 016b eb0b 550a e585
7deb dcd7 ed5d 4f58 2f59 dfb5 61fa 869d
1b3e 1589 8aae 14db 1797 157f d828 dc78
e51b 876f cabf 99dc 94b4 a9ab c4b9 64cf
66d2 66e9 e6de 2d9e 5b0e 96aa 97e6 970e
6e0d d9da b40d df56 b4ed f5f6 45db 2f97
cd28 dbbb 83b6 43b9 a3bf 3cb8 bc65 a7c9
cecd 3b3f 54a4 54f4 54fa 5436 eed2 ddb5
61d7 f86e d1ee 1b7b bcf6 34ec d5db 5bbc
f7fd 3ec9 bedb 5501 554d d566 d565 fb49
fbb3 f73f ae89 aae9 f896 fb6d 5dad 4e6d
71ed c703 d203 fd07 230e b6d7 b9d4 d51d
d23d 5452 8fd6 2beb 470e c71f befe 9def
772d 0d36 0d55 8d9c c6e2 2370 4479 e4e9
f709 dff7 1e0d 3ada 768c 7bac e107 d31f
761d 671d 2f6a 429a f29a 469b 539a fb5b
625b ba4f cc3e d1d6 eade 7afc 47db 1f0f
9c34 3c59 794a f354 c969 dae9 82d3 9367
f2cf 8c9d 959d 7d7e 2ef9 dc60 dba2 b67b
e763 cedf 6a0f 6fef ba10 74e1 d245 ff8b
e73b bc3b ce5c f2b8 74f2 b2db e513 57b8
579a af3a 5f6d ea74 ea3c fe93 d34f c7bb
9cbb 9aae b95c 6bb9 ee7a bdb5 7b66 f7e9
1b9e 37ce ddf4 bd79 f116 ffd6 d59e 393d
ddbd f37a 6ff7 c5f7 f5df 16dd 7e72 27fd
cecb bbd9 7727 eead bc4f bc5f f440 ed41
d943 dd87 d53f 5bfe dcd8 efdc 7f6a c077
a0f3 d1dc 47f7 0685 83cf fe91 f58f 0f43
058f 998f cb86 0d86 eb9e 383e 3939 e23f
72fd e9fc a743 cf64 cf26 9e17 fea2 fecb
ae17 162f 7ef8 d5eb d7ce d198 d1a1 97f2
9793 bf6d 7ca5 fdea c0eb 19af dbc6 c2c6
1ebe c978 3331 5ef4 56fb edc1 77dc 771d
efa3 df0f 4fe4 7c20 7f28 ff68 f9b1 f553
d0a7 fb93 1993 93ff 0403 98f3 fc63 332d
db00 0000 2063 4852 4d00 007a 2500 0080
8300 00f9 ff00 0080 e900 0075 3000 00ea
6000 003a 9800 0017 6f92 5fc5 4600 0005
db49 4441 5478 daec ddc1 6ee4 3a0e 4051
71d2 efff 3f59 b379 0d14 0492 a233 b389
730e 1024 a972 d94e 7617 92a5 d87b afb5
d67f 8eaf afb5 56fc fbfd ebe3 b5af b5d6
9f8f d7fe 7cfc fef9 de9f e4eb 6bad f54f
f1de 3fc3 dfbf 8af7 be92 9f3f 8f3f efed
ebf8 1b3e ffbe f3ef 8de3 7f03 0000 f00a
55e0 ec7f 43e8 efcf e77b d96b 7f55 9fab
4473 ec3e be47 738e ecb8 f8b8 dfdd dc6b
7c7c 65ff 8768 ae0d 0000 f0aa 209c 4458
168f dde7 aaf0 db83 f34e a2b1 8ab6 2ce8
a651 bb92 a004 0000 787d 10ae 2290 cec0
fb8c b5dd 04e4 bec4 e56e ae79 7e36 8a08
cd7e df49 04c6 2558 c51f 0000 f0eb 82b0
1ac1 db97 488b 261c 27f1 778b d168 eee9
169d 91fc bc07 d7bc 0531 0000 c0ab 8270
fa8c 5e77 6c17 6a7b d5a3 7d4f 460f b358
7c12 b3d9 67f6 ff29 6001 0000 7e54 10de
165c e922 e9c9 f375 9311 ba73 2198 6aaa
e919 98b1 66cf 1aae 4b98 9ec7 1b1d 0400
005e 1d84 b1ee a37f d17c ff0c bd6a a5ce
559c 7fba 6269 775c 1571 3188 d32c 8877
1298 c210 0000 7865 109e 6177 0657 1764
bb89 a6bd fa51 bbee fcd3 a8cb b69c e8ee
e9b6 40ce 2a02 d7b4 5100 00e0 b541 9885
5cf5 de19 6cb7 6700 2309 b65b f89d 5346
a309 c93d 08c3 5bd4 65ab 8cc6 2524 0100
005e 1784 5d34 7571 9645 65f5 bcde edf3
b708 8b95 ef53 182b 9fce 7a7b c630 8b43
fb0f 0200 00af 0fc2 e986 f159 24ed 4bcc
c5ca 47eb aab8 9bc4 6076 ddea 79c3 dd1c
dbfd bddf 0949 0000 801f 1784 9340 5b4d
4475 cf1e 9ee7 dd97 b0cb 82ed 365a d72d
fc52 ed63 b89a 6b4e a799 0200 00fc f820
8c35 1bf5 3ba3 2a1b 3dab 561c ad9e 15cc
46f6 b211 bdc9 caa7 bb39 e724 386f e10b
0000 f0ba 20cc c2e7 c996 0d93 d53e d7ca
f73b 3cf7 119c 8a26 20ab 4561 a653 562d
2603 0000 fcaa 20ec e229 0651 988d ce55
7b14 66d7 eaae 779b 9a5a dd5b 169e 53fb
9b9f 0300 00f8 3141 788b b32a be6e 5b42
5451 969d 2786 af9d e73f 0333 927b bb05
5f17 9542 1000 0078 7510 667b ef4d 42a8
5aac 65ba 5ae7 6421 99db fb93 703d 5fcf
b6aa c8c2 7537 f70a 0000 f08a 205c 4920
9d1b bd47 73dc f4b9 c369 984d 3e5b 056a
f5fd 36bd f53c 2ed6 f79e 6b04 0000 f891
4198 c554 1679 6734 7641 d74d f39c 845e
159b 55a0 76a3 7e93 689d 6c89 0100 00f0
aa20 9c4c 91bc ad3a 1aab de6a a25b 69b4
dbba e2b6 37e0 e735 6fcf 0dc6 2540 851f
0000 f02b 8330 9ae8 cb46 0457 1378 e77b
d5f4 d3ff 65c1 9775 9caf bab7 2822 b28b
da75 094a 0000 8057 05e1 34d0 9e4e a1cc
f627 cc7e bead 08da ed13 b8d7 7df4 6f0d
8eb7 393d 0000 f06b 83b0 8a9e 2cc4 2209
c5bf afdf c229 8bbf 2cd0 ba3d 07cf e3ba
e9ae ddc8 e0f4 3e8c 0e02 0000 af0e c22a
a476 1380 5934 3d99 9239 99e2 b99a 488b
6144 4eb6 a788 221e 2723 9800 0000 3f3a
086f 1bcc df46 d86e 8bb5 740b cb74 fb17
aee6 bce7 b383 d5c2 3431 3c77 34f7 63ca
2800 00f0 da20 bcc5 de24 d86e 1bd3 efd5
4fc1 dc0f 2333 56be 1762 1676 7b70 de5b
1c03 0000 bc32 08f7 c368 da49 c855 ab90
de56 f8fc 8cb0 6c25 d26a bfc3 2c30 7771
cdef ae6e 2a0c 0100 80d7 0761 372a 1697
40aa 62ad 5b01 b47a 5eaf 8ad3 bdf2 e7fc
aad8 ecb6 c788 355b 6154 0c02 0000 bf22
08a7 3134 99f6 9905 66b7 e04b 3632 5805
5e14 11bb bff1 3754 319c 85a9 3804 0000
5e19 84b7 055f b2a0 aa16 5e89 cb79 b2e9
a5bb 09b2 d584 6475 ce6e 7198 f530 829f
ec71 0800 00f0 e382 309a 58cb 62a8 7a1e
afda b3f0 dc96 6217 21d8 05da edd8 6a84
309a 7b5b 4560 66e7 3542 0800 00bc 3208
5712 86fb 125f d33d ff6e e136 f96c b5a8
4c7c e3de 63d5 aba1 4e42 1700 00e0 9541
f844 176f d971 4f22 3386 a1b8 1f9c fff3
986e 35d4 ecb9 c1a7 534f 0100 007e 5410
3e7d d66e 3ad5 f3dc 7f30 5b6c 269a 38ec
ce5b 4568 b50d 45b7 084d 3755 d608 2100
00f0 ea20 7c32 4d72 17c1 942d 3693 8de0
dd46 f6ce 11c2 68ee a1ba 8f2a 38f7 caa7
bc1a 0504 0000 7e6d 103e d998 3e8a 00cb
e26b 3a2a 582d 2033 1d9d ebf6 423c ef39
bb76 37e2 2814 0100 8057 0761 1545 5104
5b16 73dd 48df 6d44 30f3 64b1 9a35 8cc8
2a1a ab11 47d3 4501 0080 d707 e124 9cd6
25d0 e212 85d5 de83 fb72 beee 99c2 ec1c
ddb3 7fd5 e860 0c02 1700 00e0 5704 61a7
1a39 9bac 3cfa 398d 7417 9178 6e0d 11ab
de23 307b d6b0 bbb7 6ec5 d228 82d2 2821
0000 f03a ff05 0000 ffff 0300 66e5 1f67
535c 28e4 0000 0000 4945 4e44 ae42 6082

script.js

// Animate affordibility text on select
$('#ten').bind('click touchend',function(e){
  $('#fader').find(".mask").addClass('revealed');
})

style.css

#fader {
    text-align:center;
    z-index:0;
    width:850px;
    height:40px;
    position:relative;
    margin:0 auto;
}
#fader h3{
    font-size:17px;
    padding-top:13px;
    z-index:0;}
#fader .mask {
    text-align:center;
    z-index:0;
    height:40px;
    margin:0 auto;
    width:850px;
    z-index:1;
    position:absolute;
    top:0;
    right:0;
    -webkit-transition: width 2.0s ease-in-out 0.1s;
    -moz-transition: width, 2.0s ease-in-out 0.1s;
    -o-transition: width 2.0s ease-in-out 0.1s;
    transition: width 2.0s ease-in-out 0.1s;
    overflow:hidden;
}

#fader .mask.revealed {
    width:0;
}