Bloggerデザイン : シネマティック・オーバーレイ・カード

1. デザインのタイプ

【Cinematic Overlay Card / シネマティック・オーバーレイ・カード】
映画のポスターやストリーミングサービスのUIのような、高級感あふれるデザインです。ホバー（マウスを乗せる）するまで詳細を隠しておくことで、ページをスッキリ見せつつ、読者の「中身が見たい！」という興味をそそります。

Top Gun: Maverick

★★★★★ 2022 · 2h11m

アメリカ海軍のエリート飛行士訓練校に、かつて天才パイロットと呼ばれたマーヴェリックが教官として帰ってくる。生徒の中には、彼がかつてタッグを組み、訓練中に命を落としたパイロットの息子もいた。父の背中を追いかけてきた彼は、マーヴェリックに対し恨みを抱いていた。

2. デザインの特徴

• インタラクティブ・ホバー
  マウスを乗せると、あらすじとアイコンが下からスッと浮き上がってくる「動的な楽しさ」を搭載。
• シネマティック・グラデーション
  画像の下部に暗めのグラデーションを敷くことで、どんな背景画像でも白い文字がクッキリ読みやすくなっています。
• ズーム＆スケール効果
  ホバー時に画像が少しだけズーム。この「わずかな動き」が、サイトのプロっぽさを一気に引き上げます。
• スマホ最適化済み
  スマホではあえて情報を絞り、タイトルとアイコンだけでスッキリ見せるレスポンシブ設計です。

3. 紹介コード（コピペ用）

以下のコードをHTMLビューに貼り付けるだけで、あなたのブログに映画級のカードが登場します！

<style>
.cp-movie-card { --transition-duration: 700ms; --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); color: white; position: relative; border-radius: 12px; overflow: hidden; height: 400px; max-width: 100%; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform var(--transition-duration); margin: 20px auto; background: #000; }
.cp-movie-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%); z-index: 1; }
.cp-movie-card img { height: 100%; width: 100%; transition: transform var(--transition-duration); object-fit: cover; }
.cp-content { z-index: 2; position: absolute; bottom: 30px; left: 30px; right: 30px; text-align: left; transition: transform var(--transition-duration) var(--ease-in-out); }
.cp-movie-card h2 { font-size: 1.8em; color: white !important; margin: 0; font-weight: bold; }
.cp-synopsis { font-size: 0.85em; line-height: 1.5; margin: 15px 0; transition: all calc(var(--transition-duration) / 2); opacity: 0; transform: translateY(20px); }
.cp-icons { display: flex; gap: 15px; }
.cp-icons svg { height: 1.2em; width: auto; opacity: 0; transform: translateY(15px); transition: all 0.3s; }
.cp-movie-card:hover { transform: scale(1.02); }
.cp-movie-card:hover img { transform: scale(1.05); }
.cp-movie-card:hover .cp-synopsis { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.cp-movie-card:hover .cp-icons svg { opacity: 1; transform: translateY(0); }
.cp-movie-card:hover .cp-icons svg:nth-child(1) { transition-delay: 0.4s; }
.cp-movie-card:hover .cp-icons svg:nth-child(2) { transition-delay: 0.5s; }
.cp-movie-card:not(:hover) .cp-content { transform: translateY(80px); }
@media (max-width: 640px) { .cp-movie-card { height: 250px; } .cp-movie-card h2 { font-size: 1.2em; } .cp-synopsis { display: none; } .cp-movie-card:not(:hover) .cp-content { transform: translateY(0); } }
</style>

<article class="cp-movie-card">
  <img src="画像URL" alt="Avatar" />
  <div class="cp-content">
    <h2>タイトル</h2>
    <p class="cp-synopsis">本文</p>
    <div class="cp-icons">
      <svg viewBox="0 0 24 24" fill="white" width="24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
      <svg viewBox="0 0 24 24" fill="white" width="24"><path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"/></svg>
    </div>
  </div>
</article>