Bloggerデザイン : スライディングパネルカード

あなたのプロンプト

1. デザインのタイプ

【オーバーレイ・スライディングパネルカード】
ホバー操作に連動して詳細情報が下から競り上がる、インタラクティブで没入感のあるグリッドデザインです。

Top Gun: Maverick

上映時間 2時間11分 ★★★★★

伝説のパイロット、マーヴェリックが教官として帰還。新世代の精鋭パイロットたちと共に、絶対不可能な極秘任務に挑む。空を駆ける圧倒的なスピード感とドラマが融合した傑作アクション。

公式サイト

2. デザインの特徴

• 二段階の視覚展開
  通常時はタイトルのみを強調し、ホバーで詳細説明やアクションボタンを露出させることで情報の優先順位を整理します。
• 洗練されたタイポグラフィ
  Google Fonts（Oswald / Noto Sans JP）を組み合わせ、力強さと読みやすさを両立したモダンな外観を実現しました。
• 多機能なフッターレイアウト
  リンクボタンとSNSアイコンを左右にバランス良く配置。カード内の限られたスペースを機能的に活用しています。

3. 紹介コード

<section class="grid-section">
  <article class="custom-grid-item">
    <div class="custom-featured-image">
      <img src="画像URL" alt="タイトル" />
    </div>

    <div class="custom-overlay-container">
      <div class="overlay-panel">
        <div class="panel-header">
          <h2 class="overlay-title">タイトル</h2>
          <div class="overlay-tag-A">サブ情報 <span class="rating-stars">★★★★★</span></div>
        </div>
        <div class="panel-body">
          <p class="overlay-detail">詳細な説明テキストをここに記述します。</p>
          <div class="panel-footer">
            <a class="overlay-readmore" href="#">公式サイト</a>
            <div class="overlay-icons">
              <i class="fa-solid fa-list"></i>
              <i class="fa-brands fa-twitter"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
</section>

<style>

/* 基本設定 */
.custom-grid-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #000;
}

/* ホバーアクション */
.overlay-panel {
  transform: translateY(180px); /* 初期位置 */
  transition: transform 1.0s cubic-bezier(0.65, 0, 0.35, 1);
}

.custom-grid-item:hover .overlay-panel {
  transform: translateY(0);
}

/* タイポグラフィ */
.overlay-title {
  font-family: 'Oswald', sans-serif;
  color: #fff !important;
}

.rating-stars { color: #ffcc00; }

</style>