Bento with Images
Grille CSS asymétrique 4×3 avec six cellules à fond dégradé et overlay de texte glissant qui s'active au survol.
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 mise en page repose sur un CSS Grid 4×3 (4 colonnes, 3 rangées) dans lequel six cellules occupent des surfaces inégales grâce à grid-area: span N / span M — la cellule principale couvre 2×2, d'autres s'étirent sur 1 ou 2 colonnes. Aucun calcul de largeur manuel n'est nécessaire : le navigateur répartit l'espace automatiquement via repeat(4, 1fr).
Chaque cellule porte un dégradé linéaire 135° unique défini dans les sélecteurs .cell-1 à .cell-6 (violet-indigo, rose-rouge, bleu-cyan, vert-turquoise, rose-jaune, lavande-rose). La propriété background-size: cover est déjà en place sur .bento-images .bento-cell, ce qui permet de remplacer les dégradés par de vraies images sans toucher à la structure.
L'overlay est un <div class="overlay"> en position: absolute; inset: 0, fond rgba(0,0,0,0.4) et opacity: 0 au repos. Le sélecteur .bento-images .bento-cell:hover .overlay porte l'opacité à 1 en 0,4 s de transition CSS. L'effet est 100 % CSS : aucun écouteur d'événement JavaScript ne gère ce hover.
Le <span> à l'intérieur de l'overlay démarre à transform: translateY(20px) et glisse vers translateY(0) au hover via transition: transform 0.4s — le label surgit du bas de la cellule en même temps que l'overlay s'assombrit.
Accessibilité
- prefers-reduced-motion absent : le code ne contient pas de
@media (prefers-reduced-motion: reduce)— les transitions opacity et translateY (0,4 s) s'exécutent même si l'OS demande à réduire le mouvement. Ajoutez un bloc@media (prefers-reduced-motion: reduce) { .bento-images .bento-cell .overlay, .bento-images .bento-cell .overlay span { transition: none !important; } }pour se conformer à WCAG 2.3.3. - Contraste du texte overlay : blanc sur fond
rgba(0,0,0,0.4)au-dessus d'un dégradé → ratio ≥ 4,5:1 dans tous les cas — conforme WCAG AA. - Navigation clavier : les cellules ont
cursor: pointermais aucuntabindexni gestionnaire clavier — l'overlay ne s'active pas avec Tab/Entrée. Ajouteztabindex="0"et une règle:focus-within .overlaysi les cellules doivent être atteignables. - Aucun attribut ARIA sur la grille ou les cellules (ni
role, niaria-label). Si les cellules servent de liens ou boutons, enveloppez-les dans des<a>ou<button>et ajoutez des libellés accessibles. - Les textes des overlays (Design, Photo…) sont dans le flux DOM normal et lisibles par les lecteurs d'écran sans configuration ARIA supplémentaire — ils ne sont masqués que visuellement par
opacity: 0.
Compatibilité navigateur
Nécessite CSS Grid Level 1 et la pseudo-classe :hover — supportés universellement depuis 2017.
Sans CSS Grid (IE 10 non supporté), les cellules s'empilent verticalement en blocs pleine largeur — le contenu reste lisible. Sur écrans tactiles, le :hover ne se déclenche pas ; l'overlay reste caché. Ajoutez un gestionnaire touchstart ou une règle :focus-within pour basculer l'overlay au tap.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="bento-container">
<div class="bento-grid bento-images">
<div class="bento-cell cell-1"><div class="overlay"><span>Design</span></div></div>
<div class="bento-cell cell-2"><div class="overlay"><span>Photo</span></div></div>
<div class="bento-cell cell-3"><div class="overlay"><span>Video</span></div></div>
<div class="bento-cell cell-4"><div class="overlay"><span>3D</span></div></div>
<div class="bento-cell cell-5"><div class="overlay"><span>Motion</span></div></div>
<div class="bento-cell cell-6"><div class="overlay"><span>Art</span></div></div>
</div>
</div>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 |
|---|---|---|
| --radius-lg | 0.75rem | Rayon des coins de toutes les cellules. 0 = angles francs, 1.5rem = cases très arrondies. |
| --border | rgba(255,255,255,0.08) | Couleur de la bordure de chaque cellule. Augmentez l'alpha ou changez la couleur pour marquer davantage la séparation. |
| gap (sélecteur .bento-grid) | 12px | Espacement entre cellules. 8 px = aspect magazine serré, 20 px = layout aéré. |
| Dégradés .cell-1 à .cell-6 | 6 dégradés 135° distincts | Chaque sélecteur porte un background: linear-gradient(…) indépendant. Remplacez-le par background-image: url(…) pour de vraies photos — background-size: cover est déjà en place. |
| overlay background (sélecteur .overlay) | rgba(0,0,0,0.4) | Opacité et couleur du voile au survol. Augmentez l'alpha pour une meilleure lisibilité sur fonds clairs, diminuez-le pour laisser transparaître davantage le fond. |
| transition durée (sélecteur .overlay) | 0.4s | Durée de l'apparition de l'overlay. 0.2 s = réactif et vif, 0.7 s = fondu doux. |
| translateY initial (sélecteur .overlay span) | translateY(20px) | Décalage initial du texte avant le survol. Augmentez à 40 px pour un glissement plus marqué, passez à translateX pour une direction latérale. |
FAQ
background-size: cover est déjà présente sur .bento-images .bento-cell. Remplacez simplement background: linear-gradient(…) par background-image: url(votre-image.jpg) dans chaque sélecteur .cell-N — aucune autre modification nécessaire.:hover → opacity + transform). Le JS inclus dans l'effet gère d'autres variantes Bento (animated, interactive, stats) et ne touche aucune cellule .bento-images.grid-template-columns et grid-template-rows dans le sélecteur .bento-images, puis ajustez les grid-area: span N / span M dans .cell-1 à .cell-6. Pour 5 cellules, supprimez .cell-6 et redistribuez les spans pour remplir la grille sans case vide.
