Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1294" role="group" aria-label="左右のギャラリー画像がホバー時に幅を変える"><span class="tbx-1294__left"><b>01</b><small>FORM</small></span><span class="tbx-1294__right"><b>02</b><small>COLOR</small></span></div>CSS
*{box-sizing:border-box}
.tbx-1294{display:flex;width:300px;max-width:100%;height:162px;border:5px solid #ece8e0;background:#ece8e0;gap:5px;border-radius:8px;overflow:hidden;font-family:system-ui,sans-serif;cursor:default}.tbx-1294>span{min-width:0;display:flex;align-items:flex-end;justify-content:space-between;flex-direction:column;padding:12px 11px;color:#fff;overflow:hidden;transition:flex .5s ease}.tbx-1294__left{flex:1.55;background:linear-gradient(133deg,transparent 46%,#8f6d61 47% 55%,transparent 56%),radial-gradient(circle at 65% 38%,#ecc49a 0 29px,transparent 30px),linear-gradient(150deg,#486678,#122f46)}.tbx-1294__right{flex:1;background:radial-gradient(ellipse at 64% 47%,#f6bc5d 0 30px,transparent 31px),linear-gradient(122deg,transparent 30%,#9d4858 31% 45%,transparent 46%),linear-gradient(120deg,#cb6d6d,#572f66)}.tbx-1294 b{font-size:16px;align-self:flex-start}.tbx-1294 small{font-size:10px;letter-spacing:.15em;font-weight:750}.tbx-1294:hover .tbx-1294__left,.tbx-1294:focus-visible .tbx-1294__left{flex:.72}.tbx-1294:hover .tbx-1294__right,.tbx-1294:focus-visible .tbx-1294__right{flex:2}.tbx-1294:focus-visible{outline:3px solid #bf7a46;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1294 *,.tbx-1294::before,.tbx-1294::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。