Content Reveal
Titre affiché, contenu caché : au survol, le titre glisse vers le haut et le panneau de texte monte depuis le bas — effet 100 % CSS, aucun JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La carte (`.card-content-reveal`) utilise overflow: hidden couplé à position: relative. Le panneau .card-content est positionné en absolute sur le bord bas de la carte avec bottom: 0 et commence à translateY(100%) — entièrement sous le bord inférieur, invisible car rogné par le overflow.
Au survol (:hover), deux transitions transform .4s s'activent simultanément : le titre (.card-reveal-title, avec z-index: 1) monte de 30 px (translateY(-30px)) pour libérer la zone basse ; le panneau de contenu revient à translateY(0) et remonte depuis le bas de la carte.
Le panneau de contenu porte un background: linear-gradient(transparent, rgba(0,0,0,.9)) qui garantit la lisibilité du texte quel que soit le fond de la carte. Ce dégradé transparent-vers-sombre ne masque rien avant le survol.
L'effet est 100 % CSS déclaratif — le champ js de cet effet est vide. Il s'applique directement via des classes CSS dans n'importe quel framework (React, Vue, Svelte) ou CMS générant du HTML statique.
Accessibilité
- prefers-reduced-motion absent : le code ne contient pas de bloc
@media (prefers-reduced-motion: reduce). Les transitions continuent même si l'OS demande à réduire le mouvement. Ajoutez manuellement@media (prefers-reduced-motion: reduce) { .card-content-reveal .card-reveal-title, .card-content-reveal .card-content { transition: none } }dans votre CSS. - Navigation clavier absente : la révélation ne se déclenche que sur
:hover. Une<div>n'est pas focusable par défaut. Ajouteztabindex="0"sur le conteneur et dupliquez les règles:hoversous:focus-withinpour les utilisateurs clavier. - Contenu masqué lisible par les lecteurs d'écran : le texte dans
.card-content(entranslateY(100%)) est dans le DOM et n'est nidisplay:nonenivisibility:hidden— il reste accessible aux technologies d'assistance même à l'état masqué. - Contraste du panneau : le dégradé
rgba(0,0,0,.9)sur texte blanc assure un ratio ≥ 7:1 (WCAG AAA) sur le panneau révélé. - Structure sémantique : le conteneur est une
<div>sans rôle. Remplacez-la par un<article>ou<li>selon le contexte et ajoutez unaria-labelouaria-labelledbypointant vers.card-reveal-title.
Compatibilité navigateur
Utilise exclusivement CSS Transitions et position absolute — pas de JavaScript, pas de Canvas, aucune API récente requise.
Sans support des CSS Transitions, la carte affiche son état de repos (titre centré, fond dégradé bleu). Le contenu dans .card-content reste dans le DOM mais n'est pas accessible visuellement au survol — aucune erreur JS, la page reste fonctionnelle.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-demo card-content-reveal">
<span class="card-reveal-title">Titre visible</span>
<!-- Contenu révélé au survol -->
<div class="card-content">
<p>Texte ou HTML quelconque</p>
</div>
</div>
<!-- Note : card-demo fournit les dimensions 280×180 px de la démo.
En production, remplacez-la par votre propre classe de dimensionnement. -->HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Couleur de fond de la carte quand aucun dégradé n'est défini. Modifiez cette variable CSS au niveau de la carte pour un rendu monochrome. |
| --radius-xl | 1rem | Rayon des coins arrondis de la carte. Passez à 0 pour des angles droits ou 1.5rem pour des coins très arrondis. |
| background (`.card-content-reveal`) | linear-gradient(135deg, #3b82f6, #1d4ed8) | Dégradé bleu de fond de la carte. Remplacez par vos couleurs brand, une couleur unie ou une image CSS. |
| transition duration (`.card-reveal-title`, `.card-content`) | .4s | Durée de l'animation de révélation. .2s = réponse immédiate, .6s = fondu lent et cinématique. |
| translateY (`:hover .card-reveal-title`) | -30px | Amplitude de montée du titre au survol. Ajustez en fonction de la taille de police et de la hauteur de votre carte (ex. -40px pour une carte plus haute). |
| background (`.card-content`) | linear-gradient(transparent, rgba(0,0,0,.9)) | Scrim du panneau révélé. Réduisez l'opacité finale (rgba(0,0,0,.6)) pour un fond plus transparent sur une carte de couleur claire. |
| padding (`.card-content`) | 20px | Espacement interne du panneau de contenu révélé. Augmentez à 28px pour plus d'air, réduisez à 12px sur de petites cartes. |
FAQ
:hover et le second le désactive. Cela fonctionne mais peut sembler peu intuitif. Pour une meilleure expérience mobile, ajoutez en JS un écouteur touchstart qui bascule une classe .is-revealed sur la carte, et dupliquez les règles :hover sous .card-content-reveal.is-revealed.tabindex="0" sur le conteneur .card-content-reveal, puis dans votre CSS remplacez les sélecteurs :hover par :hover, :focus-within. La carte se révèle alors au clic ou au focus clavier, sans JavaScript supplémentaire.transition : ajoutez opacity .4s sur .card-content, posez opacity: 0 à l'état de repos et opacity: 1 au survol. Le fondu se superpose à la translation pour une révélation plus douce.
