Periodic Table Element
Periodic-table tiles for the first three periods, color-coded by element category (nonmetal, alkali, halogen, noble, metalloid, etc.). Hover any tile and a card lifts in with atomic number, mass, electron configuration, melting/boiling points, and discovery credit.
Periodic Table Element the 16th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="elm-stage">
<div class="elm-grid">
<div class="elm-row">
<div class="elm-tile elm-nonmetal">
<div class="elm-num">1</div><div class="elm-sym">H</div><div class="elm-name">Hydrogen</div><div class="elm-mass">1.008</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">H</div><div class="elm-card-name">Hydrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">1</span></div>
<div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">1.008 u</span></div>
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s¹</span></div>
<div class="elm-card-row"><span class="elm-card-key">State (25°C)</span><span class="elm-card-val">Gas</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−252.9 °C</span></div>
</div>
<div class="elm-card-disc">Discovered 1766 · Henry Cavendish</div>
</div>
</div>
<div class="elm-gap" style="width:380px"></div>
<div class="elm-tile elm-noble">
<div class="elm-num">2</div><div class="elm-sym">He</div><div class="elm-name">Helium</div><div class="elm-mass">4.003</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">He</div><div class="elm-card-name">Helium</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">2</span></div>
<div class="elm-card-row"><span class="elm-card-key">Atomic Mass</span><span class="elm-card-val">4.003 u</span></div>
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">1s²</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−268.9 °C</span></div>
</div>
<div class="elm-card-disc">Discovered 1895 · Ramsey, Clève, Langlet</div>
</div>
</div>
</div>
<div class="elm-row">
<div class="elm-tile elm-alkali">
<div class="elm-num">3</div><div class="elm-sym">Li</div><div class="elm-name">Lithium</div><div class="elm-mass">6.941</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">Li</div><div class="elm-card-name">Lithium</div><span class="elm-cat elm-cat-alkali">Alkali Metal</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">3</span></div>
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s¹</span></div>
<div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">180.5 °C</span></div>
<div class="elm-card-row"><span class="elm-card-key">Use</span><span class="elm-card-val">Batteries, ceramics</span></div>
</div>
<div class="elm-card-disc">Discovered 1817 · J. A. Arfwedson</div>
</div>
</div>
<div class="elm-tile elm-alkaline">
<div class="elm-num">4</div><div class="elm-sym">Be</div><div class="elm-name">Beryllium</div><div class="elm-mass">9.012</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">Be</div><div class="elm-card-name">Beryllium</div><span class="elm-cat elm-cat-alkaline">Alkaline Earth</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Atomic No.</span><span class="elm-card-val">4</span></div>
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s²</span></div>
<div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">1,287 °C</span></div>
<div class="elm-card-row"><span class="elm-card-key">Note</span><span class="elm-card-val">Highly toxic dust</span></div>
</div>
<div class="elm-card-disc">Discovered 1798 · L.-N. Vauquelin</div>
</div>
</div>
<div class="elm-gap" style="width:300px"></div>
<div class="elm-tile elm-metalloid">
<div class="elm-num">5</div><div class="elm-sym">B</div><div class="elm-name">Boron</div><div class="elm-mass">10.81</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">B</div><div class="elm-card-name">Boron</div><span class="elm-cat elm-cat-metalloid">Metalloid</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p¹</span></div>
<div class="elm-card-row"><span class="elm-card-key">Melting pt.</span><span class="elm-card-val">2,076 °C</span></div>
</div>
<div class="elm-card-disc">Discovered 1808 · Gay-Lussac, Davy</div>
</div>
</div>
<div class="elm-tile elm-nonmetal">
<div class="elm-num">6</div><div class="elm-sym">C</div><div class="elm-name">Carbon</div><div class="elm-mass">12.01</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">C</div><div class="elm-card-name">Carbon</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p²</span></div>
<div class="elm-card-row"><span class="elm-card-key">Allotropes</span><span class="elm-card-val">Diamond, graphite</span></div>
<div class="elm-card-row"><span class="elm-card-key">Sublimation</span><span class="elm-card-val">3,642 °C</span></div>
</div>
<div class="elm-card-disc">Known since antiquity</div>
</div>
</div>
<div class="elm-tile elm-nonmetal">
<div class="elm-num">7</div><div class="elm-sym">N</div><div class="elm-name">Nitrogen</div><div class="elm-mass">14.01</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">N</div><div class="elm-card-name">Nitrogen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p³</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−195.8 °C</span></div>
<div class="elm-card-row"><span class="elm-card-key">Atmosphere</span><span class="elm-card-val">78% of air</span></div>
</div>
<div class="elm-card-disc">Discovered 1772 · Daniel Rutherford</div>
</div>
</div>
<div class="elm-tile elm-nonmetal">
<div class="elm-num">8</div><div class="elm-sym">O</div><div class="elm-name">Oxygen</div><div class="elm-mass">16.00</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">O</div><div class="elm-card-name">Oxygen</div><span class="elm-cat elm-cat-nonmetal">Reactive Nonmetal</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁴</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−183 °C</span></div>
</div>
<div class="elm-card-disc">Discovered 1771 · C. W. Scheele</div>
</div>
</div>
<div class="elm-tile elm-halogen">
<div class="elm-num">9</div><div class="elm-sym">F</div><div class="elm-name">Fluorine</div><div class="elm-mass">19.00</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">F</div><div class="elm-card-name">Fluorine</div><span class="elm-cat elm-cat-halogen">Halogen</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁵</span></div>
<div class="elm-card-row"><span class="elm-card-key">Electronegativity</span><span class="elm-card-val">3.98 (highest)</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−188 °C</span></div>
</div>
<div class="elm-card-disc">Isolated 1886 · Henri Moissan</div>
</div>
</div>
<div class="elm-tile elm-noble">
<div class="elm-num">10</div><div class="elm-sym">Ne</div><div class="elm-name">Neon</div><div class="elm-mass">20.18</div>
<div class="elm-card">
<div class="elm-card-top"><div class="elm-card-sym">Ne</div><div class="elm-card-name">Neon</div><span class="elm-cat elm-cat-noble">Noble Gas</span></div>
<div class="elm-card-data">
<div class="elm-card-row"><span class="elm-card-key">Config</span><span class="elm-card-econfig">[He] 2s² 2p⁶</span></div>
<div class="elm-card-row"><span class="elm-card-key">Boiling pt.</span><span class="elm-card-val">−246.1 °C</span></div>
<div class="elm-card-row"><span class="elm-card-key">Emission</span><span class="elm-card-val">Red-orange glow</span></div>
</div>
<div class="elm-card-disc">Discovered 1898 · Ramsay & Travers</div>
</div>
</div>
</div>
</div>
</div> .elm-stage {
background: #0d0d10;
/* Top room — element cards pop UP from each tile, ~240px tall. */
padding: 260px 28px 40px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.elm-grid {
max-width: 660px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
}
.elm-row {
display: flex;
gap: 5px;
}
.elm-tile {
position: relative;
width: 56px;
height: 56px;
border-radius: 4px;
padding: 5px 6px;
cursor: help;
transition: transform .15s;
border: 1px solid transparent;
flex-shrink: 0;
}
.elm-tile:hover {
transform: scale(1.08) translateY(-2px);
z-index: 10;
}
.elm-nonmetal { background: rgba(40, 80, 40, 0.3); border-color: rgba(60, 160, 60, 0.25); }
.elm-alkali { background: rgba(80, 20, 20, 0.3); border-color: rgba(200, 60, 40, 0.25); }
.elm-alkaline { background: rgba(80, 50, 0, 0.3); border-color: rgba(200, 140, 0, 0.25); }
.elm-metalloid { background: rgba(20, 60, 80, 0.3); border-color: rgba(40, 160, 200, 0.25); }
.elm-noble { background: rgba(60, 20, 80, 0.3); border-color: rgba(160, 60, 200, 0.25); }
.elm-halogen { background: rgba(60, 60, 0, 0.3); border-color: rgba(180, 180, 20, 0.25); }
.elm-gap { height: 56px; flex-shrink: 0; }
.elm-num { font-size: 7.5px; color: rgba(255, 255, 255, 0.25); }
.elm-sym {
font-size: 19px;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
line-height: 1;
margin: 1px 0 2px;
}
.elm-name {
font-size: 7px;
color: rgba(255, 255, 255, 0.35);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.elm-mass {
font-size: 6.5px;
color: rgba(255, 255, 255, 0.2);
margin-top: 1px;
}
.elm-card {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-6px);
z-index: 300;
width: 220px;
background: #141418;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.95);
overflow: hidden;
text-align: left;
}
.elm-tile:hover .elm-card {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.elm-card-top {
padding: 11px 13px 9px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.elm-card-sym {
font-size: 24px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
line-height: 1;
}
.elm-card-name {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
margin-top: 2px;
}
.elm-cat {
display: inline-block;
font-size: 7.5px;
padding: 2px 6px;
border-radius: 3px;
margin-top: 6px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.elm-cat-nonmetal { background: rgba(60, 160, 60, 0.15); color: #60c060; border: 1px solid rgba(60, 160, 60, 0.2); }
.elm-cat-alkali { background: rgba(180, 40, 20, 0.15); color: #e06050; border: 1px solid rgba(180, 40, 20, 0.2); }
.elm-cat-alkaline { background: rgba(160, 100, 0, 0.15); color: #c09020; border: 1px solid rgba(160, 100, 0, 0.2); }
.elm-cat-metalloid { background: rgba(20, 100, 140, 0.15); color: #40c0e0; border: 1px solid rgba(20, 100, 140, 0.2); }
.elm-cat-noble { background: rgba(120, 40, 160, 0.15); color: #a060e0; border: 1px solid rgba(120, 40, 160, 0.2); }
.elm-cat-halogen { background: rgba(140, 140, 0, 0.15); color: #c0c020; border: 1px solid rgba(140, 140, 0, 0.2); }
.elm-card-data { padding: 9px 13px; }
.elm-card-row {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.elm-card-key {
font-size: 7.5px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.08em;
}
.elm-card-val {
font-size: 9px;
color: rgba(255, 255, 255, 0.55);
font-style: italic;
}
.elm-card-econfig {
font-size: 8px;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 0.04em;
}
.elm-card-disc {
padding: 8px 13px;
border-top: 1px solid rgba(255, 255, 255, 0.04);
font-size: 8.5px;
color: rgba(255, 255, 255, 0.2);
letter-spacing: 0.04em;
}