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

キャプションせり上がり画像タイル

ホバーすると下から半透明のキャプション帯がせり上がる画像タイルです。WordPressの特集記事一覧やカテゴリタイルで、画像と見出しを同時に見せたい場面に適しています。

scrollhovercss

プレビュー

ソースコード

HTML

<div class="d07-11-05-frame">
          <div class="d07-11-05-img"></div>
          <div class="d07-11-05-caption">SUMMER COLLECTION</div>
        </div>

CSS

.d07-11-05-frame{position:relative;width:220px;height:150px;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.14)}
        .d07-11-05-img{width:100%;height:100%;background:linear-gradient(135deg,#43cbff,#9708cc);transition:transform .5s ease}
        .d07-11-05-frame:hover .d07-11-05-img{transform:scale(1.08)}
        .d07-11-05-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:rgba(10,10,25,.6);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;transform:translateY(100%);transition:transform .35s ease}
        .d07-11-05-frame:hover .d07-11-05-caption{transform:translateY(0)}

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