Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1233"><a href="#tb1233" class="art" aria-label="山の風景の制作事例を見る"><span class="slats" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span class="caption">FIELD NOTES <b>↗</b></span></a></div>CSS
.tbx-1233{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1233 * ,.tbx-1233 *::before,.tbx-1233 *::after{box-sizing:border-box}
.tbx-1233{background:#e3e8e5}.tbx-1233 .art{position:relative;display:block;width:min(100%,294px);height:166px;overflow:hidden;border-radius:9px;box-shadow:0 9px 22px #1b3b4730}.tbx-1233 .slats{position:absolute;inset:0;display:flex;overflow:hidden;align-items:stretch}.tbx-1233 .slats i{display:block;flex:1;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22520%22%20viewBox%3D%220%200%20800%20520%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22sky%22%20x2%3D%22.1%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2375a7a6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e4c8a0%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hill%22%20x2%3D%22.6%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23315674%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231d3659%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22800%22%20height%3D%22520%22%20fill%3D%22url%28%23sky%29%22%2F%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22135%22%20r%3D%2266%22%20fill%3D%22%23fff2d2%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M0%20425%20130%20290%20243%20385%20403%20218%20582%20414%20706%20325%20800%20405V520H0Z%22%20fill%3D%22url%28%23hill%29%22%2F%3E%3Cpath%20d%3D%22M0%20475%20190%20371%20328%20490%20485%20336%20715%20455%20800%20397V520H0Z%22%20fill%3D%22%231d3659%22%20opacity%3D%22.75%22%2F%3E%3Cpath%20d%3D%22M0%20503%20120%20445%20247%20509%20445%20430%20700%20520H0Z%22%20fill%3D%22%23a3b9aa%22%20opacity%3D%22.34%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-size:500% 100%;transform:scaleY(1.01);transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}.tbx-1233 .slats i:nth-child(1){background-position:0% 0}.tbx-1233 .slats i:nth-child(2){background-position:25% 0}.tbx-1233 .slats i:nth-child(3){background-position:50% 0}.tbx-1233 .slats i:nth-child(4){background-position:75% 0}.tbx-1233 .slats i:nth-child(5){background-position:100% 0}.tbx-1233 .caption{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;background:linear-gradient(transparent,#051a2ab8);color:#fff;padding:24px 14px 12px;font:750 10px system-ui;letter-spacing:.1em;transition:padding .35s}.tbx-1233 .art:is(:hover,:focus-visible) .slats i:nth-child(odd){transform:translateY(-15px) scaleY(1.2);filter:saturate(1.3)}.tbx-1233 .art:is(:hover,:focus-visible) .slats i:nth-child(even){transform:translateY(15px) scaleY(1.2)}.tbx-1233 .art:is(:hover,:focus-visible) .caption{padding-bottom:20px}.tbx-1233 .art:focus-visible{outline:3px solid #f0b34e;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1233 *, .tbx-1233 *::before,.tbx-1233 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。