1. デザインのタイプ
【オーバーレイ・スライディングパネルカード】
ホバー操作に連動して詳細情報が下から競り上がる、インタラクティブで没入感のあるグリッドデザインです。
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>
0 件のコメント:
コメントを投稿