Hover Reveal Bento
Un bento grid CSS pur qui révèle titre et description au survol — l'icône s'efface pour laisser place au texte via une transition ressort fluide et sans JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 43 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur CSS : aucun JavaScript n'intervient pour le survol. Chaque .bento-cell contient deux calques superposés en position: absolute; inset: 0 — .reveal-front (icône) visible au repos et .reveal-back (titre + description) caché derrière. La règle :hover sur la cellule bascule les deux états simultanément.
La transition utilise cubic-bezier(.16, 1, .3, 1) sur 0,5 s — une courbe de type spring rapide qui accélère fort en début de course et décélère en douceur à l'arrivée. À l'entrée du survol, .reveal-front passe en opacity: 0 avec transform: scale(1.2) (effet de zoom sortant) pendant que .reveal-back monte de opacity: 0; scale: 0.8 à sa taille finale.
La grille bento est un display: grid à 4 colonnes et 3 rangées de fractions égales, avec un gap de 12 px. Les cellules occupent des surfaces asymétriques via grid-area : cell-1 couvre 2 colonnes × 2 rangées (cellule principale), les autres variant entre 1 et 2 colonnes selon leur position. Cette asymétrie est purement déclarative — une seule propriété par cellule dans le CSS.
L'icône dans .reveal-front est enveloppée dans un conteneur de 50 × 50 px avec border-radius: var(--radius-md) et un fond var(--gradient-primary). Le fond de chaque cellule utilise var(--bg-elevated), et la bordure passe de var(--border) à rgba(99, 102, 241, .3) au survol avec un box-shadow violet léger — donnant un retour visuel même avant l'arrivée à mi-transition.
Accessibilité
- prefers-reduced-motion absent : le code ne contient aucune media query
prefers-reduced-motion. La transition de 0,5 s s'applique à tous les utilisateurs. Correctif minimal :@media (prefers-reduced-motion: reduce) { .bento-reveal .bento-cell .reveal-front, .bento-reveal .bento-cell .reveal-back { transition: none; } } - L'effet se déclenche au survol (
:hover) uniquement — sur mobile et au clavier, les cellules restent dans leur état recto (icône). Le contenu révélé n'est pas accessible sans interaction alternative (ajoutez:focus-withinou un toggle JavaScript). - Aucun attribut
aria-*n'est défini dans le HTML fourni. Les textes.reveal-backrestent dans le DOM et sont lus par les lecteurs d'écran même au repos — pensez à ajouteraria-hidden="true"sur.reveal-frontsi l'icône est décorative. - La couleur
--text-muted(#8b8b93) sur--bg-elevated(#1a1a24) donne un ratio de contraste d'environ 4,1:1 — légèrement sous le seuil WCAG AA de 4,5:1 pour le texte normal de petite taille. - La couleur
--text-primary(#ffffff) sur fond sombre dépasse 15:1 — WCAG AAA confirmé pour les titres.
Compatibilité navigateur
Nécessite CSS Grid et CSS Transitions — supportés dans tous les navigateurs modernes. L'effet est 100 % CSS, zéro dépendance JavaScript.
Sans support CSS Grid, les cellules s'affichent en bloc vertical. Sans transitions, le basculement recto→verso est instantané — le contenu reste lisible, l'effet disparaît mais aucune erreur n'est levée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="bento-container">
<div class="bento-grid bento-reveal">
<div class="bento-cell cell-1">
<div class="reveal-front">
<div class="icon"><!-- SVG icône --></div>
</div>
<div class="reveal-back">
<h5>Titre</h5>
<p>Description courte</p>
</div>
</div>
<div class="bento-cell cell-2">
<div class="reveal-front"><div class="icon"><!-- SVG --></div></div>
<div class="reveal-back"><h5>Titre</h5><p>Description</p></div>
</div>
<div class="bento-cell cell-3">
<div class="reveal-front"><div class="icon"><!-- SVG --></div></div>
<div class="reveal-back"><h5>Titre</h5><p>Description</p></div>
</div>
<div class="bento-cell cell-4">
<div class="reveal-front"><div class="icon"><!-- SVG --></div></div>
<div class="reveal-back"><h5>Titre</h5><p>Description</p></div>
</div>
<div class="bento-cell cell-5">
<div class="reveal-front"><div class="icon"><!-- SVG --></div></div>
<div class="reveal-back"><h5>Titre</h5><p>Description</p></div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Hover Reveal Bento, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --gradient-primary | linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) | Gradient de fond du conteneur d'icône dans chaque cellule. Remplacez par votre palette brand ou un fond uni. |
| --bg-elevated | #1a1a24 | Couleur de fond de chaque cellule bento. Passez à une valeur claire (ex. #f8fafc) pour un thème light. |
| --border | rgba(255, 255, 255, 0.08) | Couleur de la bordure des cellules au repos. Augmentez l'opacité à 0,2–0,3 pour un contour plus marqué. |
| --radius-lg | 0.75rem | Arrondi de chaque cellule. Passez à 0 pour des angles vifs ou à 1,5 rem pour une apparence arrondie premium. |
| transition (CSS ligne .bento-reveal .reveal-back, .bento-reveal .reveal-front) | 0.5s cubic-bezier(.16, 1, .3, 1) | Durée et courbe d'animation de la révélation. Réduisez à 0,25 s pour une réponse vive ou augmentez à 0,8 s pour un effet cinématique. |
| gap (CSS ligne .bento-grid) | 12px | Espacement entre les cellules. Augmentez à 16–20 px pour un layout aéré, réduisez à 6 px pour une grille compacte. |
| .reveal-front .icon width/height | 50px × 50px | Taille du conteneur d'icône. Modifiez dans .bento-reveal .reveal-front .icon pour adapter aux SVG plus grands (ex. 64 × 64 px). |
| grid-template-columns (CSS ligne .bento-reveal) | repeat(4, 1fr) | Nombre de colonnes de la grille. Réduisez à repeat(3, 1fr) et adaptez les grid-area des cellules pour une disposition 3 colonnes. |
FAQ
:hover) ne se déclenche pas sur écran tactile — les cellules restent dans leur état recto (icône visible). Pour ajouter la révélation au tap, écoutez touchstart en JavaScript et basculez une classe .revealed qui applique les mêmes règles que :hover : opacity: 0; transform: scale(1.2) sur .reveal-front et opacity: 1; transform: scale(1) sur .reveal-back.grid-area dans .bento-reveal .cell-X (ex. span 2 / span 2 pour la cellule principale). La grille de base est grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr) — ajustez le nombre de colonnes/rangées et les grid-area pour toute autre disposition sans toucher au mécanisme de révélation.@media (prefers-reduced-motion: reduce) { .bento-reveal .bento-cell .reveal-front, .bento-reveal .bento-cell .reveal-back { transition: none; } }. Le basculement recto→verso reste fonctionnel mais devient instantané pour les utilisateurs sensibles au mouvement.
