Bloggerデザイン : Border Animation Hover Card

1. デザインのタイプ

【Border Animation Hover Card】
画像がシネマティックに暗転し、時間差で四方から白い枠線が浮かび上がる、洗練されたホバーエフェクト・カードです。ギャラリーサイトやポートフォリオで目を引く、インタラクティブなグリッドレイアウトを採用しています。

December 28, 2021

Voyage Memories

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

Read more

December 29, 2021

Ocean Adventures

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

Read more

2. デザインの特徴

• シネマティックな暗転効果
  ホバー時に画像輝度を0に落とすことで、背景の黒と一体化させ、浮かび上がるテキストの視認性とドラマチックな演出を両立しています。
• 四方から走るボーダーライン
  上・右・下・左と、一筆書きのように時間差で描画される白いラインが、ユーザーの視線をカード全体へ誘導します。
• Blogger環境への高い独立性
  独自のプレフィックス（.my-card）を用いることで、ブログ全体のレイアウトを壊すことなく、特定のパーツのみを安全にカスタマイズ可能です。

3. 紹介コード

<div style="background-color: black; padding: 20px;">
  <div class="my-card-container">

    <!-- Card 1 -->
    <div class="my-card">
      <div class="card-media">
        <img src="画像URL" alt="Card Image 1">
        <div class="card-border">
          <span class="top"></span>
          <span class="right"></span>
          <span class="bottom"></span>
          <span class="left"></span>
        </div>
      </div>
      <div class="card-content">
        <div class="card-header">
          <span class="card-date">日付</span>
          <h3><a href="#">リンク</a></h3>
        </div>
        <div class="card-desc">
          <p>本文</p>
        </div>
        <div class="card-footer">
          <a class="read-more-link" href="#">
            Read more
            <svg fill="none" viewBox="0 0 16 8">
              <path d="M15.354 4.354a.5.5 0 000-.708L12.172.464a.5.5 0 10-.708.708L14.293 4l-2.828 2.828a.5.5 0 10.707.708l3.182-3.182zM0 4.5h15v-1H0v1z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="my-card">
      <div class="card-media">
        <img src="画像URL" alt="Card Image 3">
        <div class="card-border">
          <span class="top"></span>
          <span class="right"></span>
          <span class="bottom"></span>
          <span class="left"></span>
        </div>
      </div>
      <div class="card-content">
        <div class="card-header">
          <span class="card-date">日付</span>
          <h3><a href="#">リンク</a></h3>
        </div>
        <div class="card-desc">
          <p>本文</p>
        </div>
        <div class="card-footer">
          <a class="read-more-link" href="#">
            Read more
            <svg fill="none" viewBox="0 0 16 8">
              <path d="M15.354 4.354a.5.5 0 000-.708L12.172.464a.5.5 0 10-.708.708L14.293 4l-2.828 2.828a.5.5 0 10.707.708l3.182-3.182zM0 4.5h15v-1H0v1z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.my-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;
  justify-content: center;
}

.my-card {
  position: relative;
  background-color: #161616 !important;
  border-radius: 2px;
  overflow: hidden;
  min-height: 300px;
  transition: all 0.25s;
}

.my-card .card-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.my-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s, filter 0.3s;
}
.my-card:hover .card-media img {
  transform: scale(1.05);
  filter: brightness(0);
}

.my-card .card-border span {
  position: absolute;
  background-color: rgba(255,255,255,0.4);
  transition: transform 0.3s linear;
  z-index: 2;
}
.my-card .card-border span.top { width: 100%; height: 1px; top:0; left:0; transform: scaleX(0); transform-origin:left;}
.my-card .card-border span.right { width:1px; height:100%; top:0; right:0; transform: scaleY(0); transform-origin:top;}
.my-card .card-border span.bottom { width:100%; height:1px; bottom:0; left:0; transform: scaleX(0); transform-origin:right;}
.my-card .card-border span.left { width:1px; height:100%; top:0; left:0; transform: scaleY(0); transform-origin:bottom;}

.my-card:hover .card-border span.top { transform: scaleX(1);}
.my-card:hover .card-border span.right { transform: scaleY(1); transition-delay:0.3s;}
.my-card:hover .card-border span.bottom { transform: scaleX(1); transition-delay:0.6s;}
.my-card:hover .card-border span.left { transform: scaleY(1); transition-delay:0.9s;}

.my-card .card-content {
  position: absolute;
  top:0; left:0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity:0;
  transition: opacity 0.3s;
  z-index:3;
}
.my-card:hover .card-content {
  opacity:1;
}

.my-card .card-header .card-date {
  display: block;
  color: rgba(255,255,255,0.6);
  margin-bottom:8px;
  font-size: 15px;
}
.my-card .card-header h3 a {
  color:#fff;
  text-decoration:none;
  transition: color 0.3s;
}
.my-card .card-header h3 a:hover {
  color:#cf000f;
}
.my-card .card-desc p {
  color: rgba(255,255,255,0.6);
  font-size:15px;
  line-height:1.8em;
}
.my-card .read-more-link {
  display:inline-flex;
  align-items:center;
  color:#fff;
  text-decoration:none;
  margin-top:20px;
}
.my-card .read-more-link svg {
  height:10px;
  margin-left:10px;
  transition: transform 0.3s;
}
.my-card .read-more-link:hover svg {
  transform: translateX(5px);
}
</style>