Hover Reveal Bento

Le code

Un aperçu du code source :

<div class="bento-container">
    <div class="bento-grid bento-reveal">
      <div class="bento-cell cell-1">
        <div class="reveal-front">
          <div class="icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
              <circle cx="12" cy="12" r="10">
              </circle>
              <path d="M12 6v6l4 2">
              </path>

Cas d'usage concrets

Quelques contextes où Hover Reveal Bento fait mouche :

• Une grille de produits e-commerce
• Un portfolio de projets
• Un dashboard de statistiques

Comment ça marche

CSS + un petit script JavaScript vanilla (aucune dépendance). Il s'appuie sur animation @keyframes, transformations CSS (transform) et du SVG animé.

À personnaliser

Tu peux régler :

• 10 variables CSS pour ajuster couleurs, espacements et arrondis
• la vitesse d'animation (actuellement 1s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajoute le petit script JavaScript avant </body> — c'est prêt.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre.

Plus d'effets Cartes

FAQ