Bloggerデザイン : ボーダーアニメーション・オーバーレイカード

1. デザインのタイプ

【ボーダーアニメーション・オーバーレイカード】
ホバーした瞬間に四方の枠線が光を放つように駆け巡り、画像が暗転して詳細なテキストが浮かび上がるドラマチックなカードデザイン。Bloggerとの干渉を完全に排除した独自のクラス設計により、どんなテンプレートでもスタイリッシュなギャラリーや記事紹介を実現します。

December 27, 2021

Scent in the Voyages

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore vero natus rem necessitatibus itaque perferendis nulla laborum debitis eius delectus.

Read more

December 27, 2021

Ocean Breezes

Explore the deep blue and find the hidden treasures of the maritime world. Professional designs for Blogger users.

Read more

2. デザインの特徴

• 動的な4辺ボーダーアニメーション
  ホバー時に上・右・下・左の順で枠線が描画される遅延アニメーションにより、高級感を演出。
• 画像からテキストへのスムーズな遷移
  不透明度の操作とスケールアップを組み合わせ、画像情報を背景に沈めつつ文字情報を浮かび上がらせます。
• テンプレート干渉ゼロの独自クラス名
  「cv-」プレフィックスを全クラスに採用し、Bloggerの標準タグ設定に左右されない独立したデザインを維持。

3. 紹介コード

<div class="cv-container">
<div class="cv-card">
<div class="cv-card-media">
<img src="画像URL" />
</div>
<div class="cv-card-content">
<div class="cv-card-header-area">
<span class="cv-card-date">日付</span>
<h3 class="cv-card-title"><a href="#">タイトル</a></h3>
</div>
<div class="cv-card-desc">
<p>説明文</p>
</div>
</div>
<div class="cv-card-border">
<span class="cv-top"></span><span class="cv-right"></span>
<span class="cv-bottom"></span><span class="cv-left"></span>
</div>
</div>
</div>

<style>
.cv-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); grid-gap: 30px; background: #161616; padding: 20px; }
.cv-card { position: relative; overflow: hidden; min-height: 450px; background: #161616; }
.cv-card-media img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.cv-card:hover .cv-card-media::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #161616; z-index: 2; }
.cv-card-content { position: relative; z-index: 3; opacity: 0; transition: 0.3s; padding: 40px; }
.cv-card:hover .cv-card-content { opacity: 1; }
.cv-card-border span { position: absolute; background: rgba(255,255,255,0.4); transition: 0.3s linear; }
.cv-top { width: 100%; height: 1px; top: 0; left: 0; transform: scaleX(0); transform-origin: left; }
.cv-card:hover .cv-top { transform: scaleX(1); }
.cv-right { width: 1px; height: 100%; top: 0; right: 0; transform: scaleY(0); transform-origin: top; }
.cv-card:hover .cv-right { transform: scaleY(1); transition-delay: 0.3s; }
/* 下辺と左辺も同様にtransition-delayを設定 */
</style>