Hover Reveal Bento

The code

A glimpse of the 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>

Concrete use cases

A few real contexts where Hover Reveal Bento shines:

• An e-commerce product grid
• A projects portfolio
• A stats dashboard

How it works

CSS + a lightweight vanilla JavaScript script (no dependency). It relies on a @keyframes animation, CSS transforms and animated SVG.

Make it yours

You can tweak:

• 10 CSS variables to tweak colors, spacing and radii
• animation speed (currently 1s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Add the small JavaScript snippet before </body> — done.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.

More Cards effects

FAQ