This demo of mine is similar and I have adjusted it just as a proof of concept although it uses real text rather than image text.
I’m thinking similar could be done with the mask-image property but I’d need your two images to test and of course the overlaid image numbers would need to have a transparent background or the image below is rubbed out.
I came across something with an RGB color and it hit me that this color scheme does offer transparency.
color: rgba(225, 225, 225, 0.01);
So if the text is transparent, then rest is fairly easy to accomplish. I’m still not through ‘testing’ this method and will not say it is bullet-proof, but it does work. I hope to learn the downsides to this method soon enough.
That’s basically a hacked up version of the example I gave you :).
It’s the background-clip that does all the heavy lifting.
That doesn’t really have anything to do with it as you could just set the color to transparent anyway. (color:transparent). However that is bad for accessibility because browsers that don’t understand the background-clip will now get transparent text so they get invisible text. You should instead use the text-fill-color property as that will work on browsers that support the background-clip:text and thus browsers that don’t understand those rules get solid text.
Now that I have access to your image I can simplify my code into basically one rule to get the effect that you want (all the rest of the code is just pretty fluff).
I also gave you some automatic responsive text sizing for smaller screens and lastly I urge you to use the prefers reduced motion media query (as in my example) as something like this is prone to inflict an epileptic fit on the unwary
The prefers reduced motion media query is something that should be added to all websites these days as its a simple and effective accessibility aid.
It should therefore work on the iPad but I’m away from home for another month and don’t have an iPad to test on here. Maybe someone else on the forum can check on their iPad and see whether it’s a safari version issue?
Can you try both my codepens on your iPad and see if they are broken also?
If it can’t be resolved then you may need to use the @supports media query to supply the enhanced version etc
Just for completeness (and for anyone else watching) I added @supports rule so that browsers that don’t understand the background-clip:text still get solid text and not invisible text. They don’t get the fancy image behind the text but do have a usable page.
(You could swap out the text for a real image if you wanted to keep the same look but without animation etc).