パーツ番号 02-12-10 ・ CSSのみ

縦書きラベル横展開タブ

普段は縦書きの短いラベルとして畳んでおき、ホバーすると横に伸びて説明文が展開します。サイドの固定タブや案内バナーに。

hovercssoverlay

プレビュー

ソースコード

HTML

<div class="d02-12-10-tab">
          <span class="d02-12-10-v">サービス案内</span>
          <span class="d02-12-10-h">WEB制作・運用・保守までワンストップでサポートします</span>
        </div>

CSS

.prev.d02-12-10{ background:#fff; }
        .d02-12-10 .d02-12-10-tab{
          position:relative;
          height:180px;
          width:52px;
          display:flex;
          align-items:center;
          justify-content:center;
          background:linear-gradient(135deg,#0ea5e9,#6366f1);
          border-radius:10px;
          overflow:hidden;
          cursor:pointer;
          transition:width .5s cubic-bezier(.22,1,.36,1);
        }
        .d02-12-10 .d02-12-10-tab:hover{
          width:100%;
        }
        .d02-12-10 .d02-12-10-v{
          writing-mode:vertical-rl;
          text-orientation:upright;
          font-size:14px;
          font-weight:700;
          letter-spacing:.2em;
          color:#fff;
          white-space:nowrap;
          transition:opacity .3s ease;
        }
        .d02-12-10 .d02-12-10-tab:hover .d02-12-10-v{
          opacity:0;
        }
        .d02-12-10 .d02-12-10-h{
          position:absolute;
          left:16px; right:16px;
          font-size:12.5px;
          font-weight:600;
          line-height:1.7;
          color:#fff;
          opacity:0;
          transition:opacity .4s ease .15s;
        }
        .d02-12-10 .d02-12-10-tab:hover .d02-12-10-h{
          opacity:1;
        }

クラス名 .d02-12-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。