Image Mask Text
Une image qui ne se voit qu'à travers les lettres d'un titre et glisse lentement dedans : votre photo dans une variable CSS, le texte reste du vrai texte.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le titre .imt-text reçoit l'image en fond (background-image:var(--imt-image)), cadrée en cover sur la boîte du texte. background-clip:text (avec sa version -webkit-) découpe ce fond à la forme exacte des lettres, et -webkit-text-fill-color:transparent efface le remplissage normal : on ne voit plus que l'image, là où il y a des lettres.
L'animation imtGlide déplace la position du fond de --imt-from (50 % 10 %) à --imt-to (50 % 90 %) en 8 s, puis revient (alternate, ease-in-out) : comme une caméra qui descend lentement le long de la photo. En cadrage cover, l'image dépasse de la boîte dans un seul sens ; pour un titre large, c'est la hauteur, d'où le trajet vertical par défaut.
Votre image se donne dans le HTML, sur la racine : style="--imt-image:url('photo.jpg')". Sans réglage, un coucher de soleil sur la mer dessiné en SVG (intégré au CSS, aucun fichier) remplit le texte. Le texte est en graisse 900 à 4rem (Inter si elle est disponible, sinon la police système), posé au centre d'une carte sombre de 280 × 180 px que les variables --imt-card, --imt-width et --imt-min-h font disparaître ou s'étirer. CSS seul, aucun JavaScript.
Accessibilité
- Texte réel : le titre reste un
<h2>(ou tout autre élément avec la classeimt-text) : lu par les lecteurs d'écran, sélectionnable, indexé. L'image n'est qu'un fond : si elle porte une information, dites-la aussi dans le texte voisin. - Contraste : la lisibilité dépend des couleurs de la photo sous les lettres. Une zone de ciel pâle sur fond clair, ou une ombre sur fond sombre, efface des morceaux de lettres. Choisissez le trajet
--imt-from/--imt-topour rester dans une zone contrastée, et une police très épaisse. - Mouvement réduit : avec
prefers-reduced-motion: reduce, l'animation est retirée et l'image se fixe au centre (50% 50%). - Repli : si
background-clip:textn'était pas pris en charge, le texte s'afficherait en violet clair (color:#c9a3f5) au lieu de disparaître.
Compatibilité navigateur
background-clip:text (préfixé -webkit- pour Chrome avant 120 et Safari avant 14), -webkit-text-fill-color, variables CSS dans @keyframes, image SVG en data URI. Mesuré dans Chromium, Firefox et WebKit (Playwright) : image visible dans les lettres et seulement dans les lettres (masquer le titre retire les pixels colorés), glissement, deux copies, arrêt en mouvement réduit, 390 px. Le remplissage par l'image marche dans des versions plus anciennes (Chrome 49, Firefox 49, Safari 9.1) ; les versions ci-dessous respectent aussi le mouvement réduit.
Sans prise en charge du découpage, le texte reste lisible en violet clair. Si l'image ne charge pas, le titre devient transparent : gardez l'image de votre titre principal sur le même domaine que la page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0621-root">
<div class="imt-card">
<h2 class="imt-text">MASK</h2>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Image (CSS — --imt-image) |
coucher de soleil sur la mer (SVG intégré) | url('photo.jpg') sur la racine, dans le HTML (style) ou votre CSS. Une photo contrastée et lumineuse donne les lettres les plus lisibles. |
Taille du texte (CSS — --imt-size) |
4rem | Plus le texte est grand et épais, plus on reconnaît l'image. |
Cadrage (CSS — --imt-fit) |
cover | Taille du fond. 160% auto agrandit l'image et donne de la marge pour un trajet horizontal. |
Trajet du glissement (CSS — --imt-from, --imt-to) |
50% 10% → 50% 90% | Positions de départ et d'arrivée de l'image, en aller-retour. Deux valeurs égales arrêtent le mouvement sur ce cadrage. |
Durée d'un aller (CSS — --imt-speed) |
8s | Plus long = mouvement plus discret ; en dessous de 4 s, l'image défile vite derrière le texte. |
Carte (CSS — --imt-card, --imt-width, --imt-min-h) |
#12121a / 280px / 180px | transparent, 100% et 0px retirent la carte : le titre se pose directement dans votre mise en page. |
Fond et hauteur du bloc (CSS — --imt-page, --imt-height) |
#0a0a0f / 300px | transparent et 0px pour intégrer l'effet dans une section existante. |
FAQ
<div class="fx-0621-root" style="--imt-image:url('ile.jpg')">. L'image est cadrée en cover sur la boîte du texte : une photo de 1 200 px de large suffit pour un titre de pleine largeur. Préférez une image sur votre propre domaine, chargée vite : tant qu'elle n'est pas là, le titre est transparent.--imt-from et --imt-to vers une zone contrastée, ou changez --imt-card pour une carte de couleur opposée.racine.style.setProperty('--imt-image', 'url(motif.png)') remplace l'image instantanément, sans toucher au texte. Pour faire suivre un aperçu à un vrai bouton, lisez son image avec getComputedStyle(bouton).backgroundImage et passez-la telle quelle.
