パーツ番号 07-11-10 ・ CSSのみ

扇状に展開するホバーギャラリー

重なった画像カードにホバーすると、扇形に広がって全体を見せてくれるギャラリー演出です。WordPressのお知らせカードやポートフォリオのまとめサムネイルに使うと目を引きます。

hovercss

プレビュー

ソースコード

HTML

<div class="d07-11-10-stack">
          <div class="d07-11-10-card d07-11-10-c1"></div>
          <div class="d07-11-10-card d07-11-10-c2"></div>
          <div class="d07-11-10-card d07-11-10-c3"></div>
        </div>

CSS

.d07-11-10-stack{position:relative;width:200px;height:160px}
        .d07-11-10-card{position:absolute;left:50%;top:50%;width:110px;height:140px;margin:-70px 0 0 -55px;border-radius:10px;box-shadow:0 8px 18px rgba(0,0,0,.22);transition:transform .4s cubic-bezier(.2,.8,.3,1.1);transform-origin:bottom center}
        .d07-11-10-c1{background:linear-gradient(135deg,#ff6a95,#ff9a56);z-index:3;transform:rotate(-6deg)}
        .d07-11-10-c2{background:linear-gradient(135deg,#845ec2,#d65db1);z-index:2;transform:rotate(0deg)}
        .d07-11-10-c3{background:linear-gradient(135deg,#4e9cf0,#38d9c4);z-index:1;transform:rotate(6deg)}
        .d07-11-10-stack:hover .d07-11-10-c1{transform:rotate(-20deg) translate(-52px,-8px)}
        .d07-11-10-stack:hover .d07-11-10-c2{transform:rotate(0deg) translateY(-16px)}
        .d07-11-10-stack:hover .d07-11-10-c3{transform:rotate(20deg) translate(52px,-8px)}

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